如果粘性侧边栏比窗口高度小，它是不是很颠簸？

Question

我有一个粘性的侧边栏，当你滚动时，当侧边栏的底部在视图中时会变得固定。

如果侧边栏超过了页面的长度，就像在这个demo中一样，滚动时一切正常，完全符合您的预期。

然而，如果侧边栏比窗口高度短，就像在这个demo中一样，当你滚动时，它似乎在跳跃，我不知道如何让它停止跳跃并变得平滑。换句话说，只有当侧边栏的底部击中窗口的底部时，它才应该被修复。

我对jQuery不太在行，所以如果有任何帮助，我将不胜感激。

$(function () {  
  if ($('.leftsidebar').offset()!=null) {

    var top = $('.leftsidebar').offset().top - parseFloat($('.leftsidebar').css('margin-top').replace(/auto/, 0));
    var height = $('.leftsidebar').height();
    var winHeight = $(window).height(); 
    var footerTop = $('#footer').offset().top - parseFloat($('#footer').css('margin-top').replace(/auto/, 0));
    var gap = 7;

    $(window).scroll(function (event) {

      // what the y position of the scroll is
      var y = $(this).scrollTop();

      // whether that's below the form
      if (y+winHeight >= top+ height+gap && y+winHeight<=footerTop) {

          // if so, ad the fixed class
          $('.leftsidebar').addClass('leftsidebarfixed').css('top', winHeight-height-gap +'px');
      } 

      else if (y+winHeight>footerTop) {
          // if so, ad the fixed class
          $('.leftsidebar').addClass('leftsidebarfixed').css('top', footerTop-height-y-gap + 'px');
      } 
      else {
          // otherwise remove it
           $('.leftsidebar').removeClass('leftsidebarfixed').css('top', '0px');
      }
    });
  }  
});

是否可以合并这两个实例？那么，如果它停留的时间相对较短，直到侧边栏到达底部，那么如果侧边栏更长，就会像现在一样吗？

Answer 1

代码完全按照预期工作。这实际上是一个概念问题。

首先想象一下它是如何工作的。你描述它工作的方式似乎就是它在你的演示中的工作方式。当侧边栏比页面长时，滚动的页面会在添加左侧边栏之前到达侧边栏的底部。如果使用更短的侧边栏，这是不可能的。

你可能想要考虑把侧边栏固定在顶部，而不是底部(就像大多数带有粘性侧边栏的网站一样)，或者有一个更高的标题，这样侧边栏就从底部开始。