javascript - 做一个粘性侧边栏？

Question

我想让我的侧边栏粘在我的网页上。只需单击类似 this one 的文章.在右侧，您可以看到侧边栏。我希望当用户向下滑动并停在 #abspann 时侧边栏会下降。但是，如果用户再次向上滚动，侧边栏也应该出现并停在原来的位置。

我已经尝试过可以找到的这段代码 here但它在我的网站上不起作用...有人可以帮助我或告诉我我需要做什么吗？

这里是代码:

<script>
    jQuery(function(){
       var sidebar = jQuery('#sidebar-wrap'),
        nav = jQuery('.sidebar-content'),
        startPosition = jQuery('#sidebar-wrap').offset().top,
        stopPosition = jQuery('#abspann').offset().top - nav.outerHeight();
        jQuery(document).scroll(function () {
            //stick nav to top of page
            var y = jQuery(this).scrollTop()

            if (y > startPosition) {
                nav.addClass('sticky');
                if (y > stopPosition) {
                    nav.css('top', stopPosition - y);
                } else {
                    nav.css('top', 0);
                }
            } else {
                nav.removeClass('sticky');
            } 
        });
    });
</script>

Answer 1

您需要通过声明来定位您的“$window”位置

var $window = $(window).scrollTop();

然后，您可以检查 $window 是否滚动到您想要的点，如下所示:

  if (height  > 0) {
    $('.sidebar-content').addClass('sticky');
  } else {
    $('.sidebar-content').removeClass('sticky');
  }

保持简单!