更新

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

Answer 2

您应该检查sticky元素的底部是否在30px的页脚上方。并相应地修改您的支票。

代码（确保根据您的设置更新FOOTER_SELECTOR）：

var FOOTER_SELECTOR = '.footer';

$(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();
      var $sticky =  $('.sticky');

      var stickyBottom = $sticky.offset().top + $sticky.outerHeight();
      var footerTop = $(FOOTER_SELECTOR).offest().top;
      var moreThan30PxAboveFooter = footerTop - 30 > stickyBottom;

      if (stickyTop < windowTop){
        if (moreThan30PxAboveFooter) {
          $sticky.css({ position: 'fixed', top: 0, width:CurrentWidth });
        }
      } else {
         $sticky.css('position','static');
      }
    });
  }
});

... stickyBottom

粘贴侧边栏可以阻止30px以上的页脚？

2 个答案:

更新

JSFiddle example