粘边栏可在页脚上方停止30px？

Question

I have a sticky sidebar, however I want to make it stop when he is 30px above #footer. How can I do this?

$(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

Just need to add the $(element).offset().top to detect where the top of your footer is, then add a check to your scroll function.

This is the section we're going to add to the scroll function:

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 });
}

Here it is in context:

$(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');
      }
    });
  }
});

Update:

Also, be sure to include the height of your sticky element. So this line:

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

changes to

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

JSFiddle example

Answer 2

You should check if the bottom of the sticky element is above the footer with 30px . And modify your check accordingly.

The code (make sure you update the FOOTER_SELECTOR according to your setup):

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