Jquery 引导固定位置左列，当页脚在视图中时变为固定

我试图在我的网站上实现一个左栏，当向下滚动时，它会变得固定，然后当它适合页脚时，它会变成绝对位于底部。当用户向上滚动时，它再次变为固定，但用户仍然可以滚动到列的顶部

我试图模仿的确切行为可以在这里看到：

当用户滚动页面时，左栏有一个固定位置，但仍滚动到底部。当用户到达页脚时，行为改变为绝对定位。当用户向上滚动时，列将再次固定，但仍允许用户滚动到列的顶部

到目前为止，我已经创建了一个JSFiddle，并将其包含在这里以供参考，但如果有人能帮助它像Google示例一样工作，我将不胜感激

var lastScrollTop=0；
$（窗口）。滚动（函数（）{
变量filterCol=$（'.filterContainer'）；
var scrollTopPos=$（窗口）.scrollTop（）；
//粘性过滤柱
如果（scrollTopPos>lastScrollTop）{
//向下滚动代码
如果（scrollTopPos>=60）{
filterCol.addClass（“固定位置”）；
if（$（window）.scrollTop（）>=$（'#ResultSol'）.offset（）.top+$（'#ResultSol'）.outerHeight（）-window.innerHeight）{
过滤器冷却移除类（“固定位置”）；
filterCol.addClass（“绝对到底部”）；
}
}
否则{
//upscroll码
filterCol.removeClass（“绝对到底”）；
过滤器冷却移除类（“固定位置”）；
}
}
lastScrollTop=scrollTopPos；
}); 
标题{
高度：100px；
背景色：#0000ff；
}
页脚{
高度：200px；
背景色：#00ff00；
}
#滤纸{
位置：相对位置；
}
.过滤器容器{
背景色：#ddd；
高度：1200px；
}
.固定位置{
位置：固定；
排名：0；
溢出：隐藏；
最小高度：自动；
宽度：24vw；
变换：translate3d（0,0,0）；
利润上限：110像素；
高度：1200px；
}
.绝对到底{
位置：绝对位置；
底部：0；
宽度：24vw；；
}
#结果酚{
高度：3000px；
背景色：#aaa；
}

标题
固定/绝对值的过滤器列
结果COL
页脚
使用
粘顶
会更简单，这样您就不需要JS

<header>HEADER</header>
<div class="container">
    <div class="row">
        <div id="filtersCol" class="col col-4">
            <div class="filterContainer sticky-top"> FILTER COL </div>
        </div>
        <div id="resultsCol" class="col col-8"> RESULTS COL </div>
    </div>
</div>
<footer>FOOTER</footer>

使用
粘顶
会更简单，这样您就不需要JS

<header>HEADER</header>
<div class="container">
    <div class="row">
        <div id="filtersCol" class="col col-4">
            <div class="filterContainer sticky-top"> FILTER COL </div>
        </div>
        <div id="resultsCol" class="col col-8"> RESULTS COL </div>
    </div>
</div>
<footer>FOOTER</footer>

我试图复制的行为可以在这个JSFIDLE示例中看到：


因此，当用户向下滚动时，左栏在到达底部时会粘住。sticky top将左列保留在顶部，这不是我想要实现的

当用户向上滚动时，左栏将正确粘贴到顶部

JSFiddle示例在CoffeeScript中，遗憾的是，该脚本没有在项目中使用，我们也在使用一个更新的JQuery

<div id="header">HEADER</div>
<div id="content">
  <div class="side" id="stick">
    TOP OF LEFT COL
    <div class="bottom">
      BOTTOM OF LEFT COL
    </div>
  </div>
  <div class="main">MAIN CONTENT</div>
</div>
<div id="footer">FOOTER</div>

body {
   margin: 0;
   padding: 10px;
}
#header {
    height: 100px;
    margin: 0 0 10px;
    background: red;
}
#content {
    position: relative;
    float: left;
    width: 100%;
    height: auto;
    margin: 0;
}
.side {
    float: left;
    width: 100px;
    height: 900px;
    margin: 0;
    background: linear-gradient(red, yellow);
}

.bottom {
  position: absolute;
  bottom: 0;
}

.main {
    height: 2500px;
    margin: 0;
    background: lightgray;
}
#footer {
    clear: both;
    height: 300px;
    background: orange;
}


$.fn.stickyTopBottom = (options = {}) ->
    # only works in browsers that support CSS3 transforms (i.e. IE9+)

    ## ##############
    #initialization
    options = $.extend  
      container: $('body') #reference element for starting and stopping the sticking 
(doesn't actually have to contain the element)
      top_offset: 0 #distance from top of viewport to stick top of element
      bottom_offset: 0 #distance from bottom of viewport to stick bottom of element
    , options

    $el = $(this)

     #Get the top of the reference element. If the container moves, would need to move this into scroll handler. 
    #If the container is translated Y, then this method will fail I believe.
    container_top = options.container.offset().top 
    element_top = $el.offset().top

    viewport_height = $(window).height()
    $(window).on 'resize', -> 
      viewport_height = $(window).height()


     ## #################
    # The meat: scroll handler
    #
    # When moving up or element is shorter than viewport:
    #    if scrolled above top of element, position top of element to top of viewport
    #      (stick to top)
    # When moving down: 
    #    if scrolled past bottom of element, position bottom of element at bottom of viewport
    #      (stick to bottom)

    current_translate = 0
    last_viewport_top = document.documentElement.scrollTop || document.body.scrollTop
    $(window).scroll (event) ->
      viewport_top = document.documentElement.scrollTop || document.body.scrollTop
      viewport_bottom = viewport_top + viewport_height
  effective_viewport_top = viewport_top + options.top_offset
  effective_viewport_bottom = viewport_bottom - options.bottom_offset

  # Need to reset element's height each scroll event because it may have change height 
  # since initialization.
  # Warning: checking height is performance no-no
  element_height = $el.height()

  is_scrolling_up = viewport_top < last_viewport_top
  element_fits_in_viewport = element_height < viewport_height

  new_translation = null
  if is_scrolling_up
    if effective_viewport_top < container_top # if we're scrolled past container top
      new_translation = 0
    else if effective_viewport_top < element_top + current_translate
      new_translation = effective_viewport_top - element_top

  else if element_fits_in_viewport
    if effective_viewport_top > element_top + current_translate
      new_translation = effective_viewport_top - element_top

  else # scrolling down
    container_bottom = container_top + options.container.height() #warning: checking height is performance no-no
    if effective_viewport_bottom > container_bottom #scrolled past container bottom
      new_translation = container_bottom - (element_top + element_height)
    else if effective_viewport_bottom > element_top + element_height + current_translate
      new_translation = effective_viewport_bottom - (element_top + element_height)

  if new_translation != null
    current_translate = new_translation
    $el.css 'transform', "translate(0, #{current_translate}px)" 

  last_viewport_top = viewport_top

 $('#stick').stickyTopBottom
  container: $('#content')

标题
左上角
左下角
主要内容
页脚
身体{
保证金：0；
填充：10px；
}
#标题{
高度：100px；
利润率：0.10px；
背景：红色；
}
#内容{
位置：相对位置；
浮动：左；
宽度：100%；
高度：自动；
保证金：0；
}
.这边{
浮动：左；
宽度：100px；
高度：900px；
保证金：0；
背景：线性梯度（红色、黄色）；
}
.底部{
位置：绝对位置；
底部：0；
}
梅因先生{
高度：2500px；
保证金：0；
背景：浅灰色；
}
#页脚{
明确：两者皆有；
高度：300px；
背景：橙色；
}
$.fn.stickyTopBottom=（选项={}）->
#仅适用于支持CSS3转换的浏览器（即IE9+）
## ##############
#初始化
选项=$。扩展
容器：$（'body'）#用于启动和停止粘贴的参考元素
（实际上不必包含元素）
顶部偏移：从视口顶部到元素顶部的0#距离
底部偏移：0#从视口底部到元素底部的距离
，选项
$el=$（此）
#获取引用元素的顶部。如果容器移动，则需要将其移动到滚动处理程序中。
#如果容器被转换为Y，那么我相信这个方法将失败。
container\u top=options.container.offset（）.top
元素_top=$el.offset（）.top
视口高度=$（窗口）.height（）
$（窗口）。在“调整大小”上，->
视口高度=$（窗口）.height（）
## #################
#肉：卷轴处理器
#
#向上移动或元素比视口短时：
#如果滚动到元素顶部上方，请将元素顶部定位到视口顶部
#（贴到顶部）
#向下移动时：
#若滚动到元素的底部，则将元素的底部放置在视口的底部
#（贴到底）
当前_translate=0
last_viewport_top=document.documentElement.scrollTop | | document.body.scrollTop
$（窗口）。滚动（事件）->
viewport_top=document.documentElement.scrollTop | | document.body.scrollTop
视口\底部=视口\顶部+视口\高度
有效视窗视窗视窗顶=视窗视窗视窗顶+选项。视窗顶偏移
有效视口底部=视口底部-选项。底部偏移
#需要在每个滚动事件中重置元素的高度，因为它可能会更改高度
#自初始化以来。
#警告：检查高度是性能否
元素高度=$el.height（）
是否正在向上滚动=视口顶部<最后一个视口顶部
元素在视口中匹配=元素高度