jQuery-粘性元素與頁腳重疊，如何避免？

Question

我的項目上有一個粘性側欄，但是當您轉到頁面底部時，粘性側欄與頁腳重疊。

我想要的是，當粘性元素到達頁腳時，就在此停下來，以便用戶可以看到整個頁腳。

這是到目前為止我所擁有的證明。

或jsfiddle，以防您更輕松

這是代碼：

var stickySidebar = $('.sticky');

if (stickySidebar.length > 0) { 
  var stickyHeight = stickySidebar.height(),
      sidebarTop = stickySidebar.offset().top;
}

// on scroll move the sidebar
$(window).scroll(function () {
  if (stickySidebar.length > 0) {   
    var scrollTop = $(window).scrollTop() + 70;

    if (sidebarTop < scrollTop) {
      stickySidebar.stop(true, false).animate({top: scrollTop - sidebarTop});

      // stop the sticky sidebar at the footer to avoid overlapping
      var sidebarBottom = stickySidebar.offset().top + stickyHeight,
          stickyStop = $('.main-content').offset().top + $('.main-content').height();
      if (stickyStop < sidebarBottom) {
        var stopPosition = $('.main-content').height() - stickyHeight;
        stickySidebar.stop(true, true).animate({top: stopPosition});
      }
    }
    else {
      stickySidebar.stop().animate({top: 0});
    } 
  }
});

$(window).resize(function () {
  if (stickySidebar.length > 0) {   
    stickyHeight = stickySidebar.height();
  }
});

Answer 1

這可能並不完美，但我認為它為您提供了正確的想法以及如何解決此問題。 您只需要檢查側邊欄的底部是否在頁腳的頂部位置之下。 比停止動畫。

http://jsfiddle.net/hdj99b21/1/

[...]

  var stickyTopPos = stickySidebar.offset().top;
  var stickyBottomPos = stickyHeight + stickyTopPos;    
  var footerTopPos = $('footer').offset().top;

  if(stickyBottomPos >= footerTopPos) {
     var stopPosition = footerTopPos - stickyHeight;
     stickySidebar.stop(true, true).css({top: stopPosition});
  }

[...]