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

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

想象一下它的工作原理。你描述它工作的方式似乎正是它在你的演示中的工作方式。当侧边栏比页面长时，滚动页面会在添加leftsidebarfixed之前到达侧边栏的底部。使用较短的侧边栏是不可能的。

您可能需要考虑将侧边栏修复到顶部，而不是底部（如大多数带有粘性边栏的网站那样）或者具有较高的标题，以便侧边栏从底部开始。

粘性侧边栏如果比窗户高度短，是否会有误？

1 个答案: