javascript - 粘性侧边栏停止在页脚上方 30 像素？

Question

我有一个粘性侧边栏，但是我想让它在他高于#footer 30px 时停止。我该怎么做？

$(function(){ // document ready
  if (!!$('.sticky').offset()) { // make sure ".sticky" element exists
    var stickyTop = $('.sticky').offset().top; // returns number 
    $(window).scroll(function(){ // scroll event
      var windowTop = $(window).scrollTop(); // returns number 
      var CurrentWidth = $('.sidebar').width();
      if (stickyTop < windowTop){
        $('.sticky').css({ position: 'fixed', top: 0, width:CurrentWidth });
      } else {
        $('.sticky').css('position','static');
      }
    });
  }
});




        <div class="col-md-3">
<aside class="sidebar  sticky">

          <nav>
            <ul class="sidebar-links">

<li><a href="#">Privacy policy</a></li>
<li><a href="#">Privacy policy</a></li>
<li><a href="#">Privacy policy</a></li>
<li><a href="#">Privacy policy</a></li>
<li><a href="#">Privacy policy</a></li>
<li><a href="#">Privacy policy</a></li>
<li><a href="#">Privacy policy</a></li>
<li><a href="#">Privacy policy</a></li>
            </ul>
          </nav>


        </aside>


        </div>

Answer 1

只需要添加 $(element).offset().top 来检测页脚顶部的位置，然后为滚动功能添加检查。

这是我们要添加到滚动功能的部分:

var footerAboveThirty = $('footer').offset().top - 30;

if (windowTop > footerAboveThirty) {
  $('.sticky').css({ position: 'absolute', top: footerAboveThirty, width: CurrentWidth });
} else {
  $('.sticky').css({ position: 'fixed', top: 0, width:CurrentWidth });
}

这是在上下文中:

$(function(){ // document ready
  if (!!$('.sticky').offset()) { // make sure ".sticky" element exists
    var stickyTop = $('.sticky').offset().top; // returns number 
    $(window).scroll(function(){ // scroll event
      var windowTop = $(window).scrollTop(); // returns number 
      var CurrentWidth = $('.sidebar').width();
      if (stickyTop < windowTop){
        //NEW SECTION
        var footerAboveThirty = $('footer').offset().top - 30;
        if (windowTop > footerAboveThirty) {
          $('.sticky').css({ position: 'absolute', top: footerAboveThirty, width: CurrentWidth });
        } else {
          $('.sticky').css({ position: 'fixed', top: 0, width:CurrentWidth });
        }
        //END NEW SECTION
      } else {
        $('.sticky').css('position','static');
      }
    });
  }
});

更新:

另外，一定要包括粘性元素的高度。所以这一行:

var footerAboveThirty = $('footer').offset().top - 30;

更改为

var footerAboveThirty = $('footer').offset().top - $('.sticky').height() - 30;

JSFiddle example