做一个粘性侧边栏？答案

【问题标题】：Make a sticky sidebar?做一个粘性侧边栏？
【发布时间】：2017-07-31 13:19:07
【问题描述】：

我想让我的侧边栏粘在我的网页上。只需单击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>

【问题讨论】：

请提供您的网站网址
其实是用Social Share Kit制作的

标签： javascript jquery html sidebar sticky

【解决方案1】：

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

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

然后，您可以检查 $window 是否滚动通过了您想要的点，如下所示：

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

保持简单！

【讨论】：

【解决方案2】：

找到了这个东西，它的工作检测是向上还是向下。剩下的你可以用 addclass 和 remove class。

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       alert("I am an alert box!");
   } else {
      alert("asfasfasfasf!");
   }
   lastScrollTop = st;
});

我确实设置了警告框来检查它是否可以快速运行，所以请注意垃圾邮件：D

【讨论】：

【解决方案3】：

在您的小提琴中对此进行了测试，似乎很有效，您只需对原始代码进行一些修改即可：

 var $navWrap = $('#navWrap'),
        $nav = $('nav'),
        startPosition = $navWrap.offset().top,
        stopPosition = $('#stopHere').offset().top - $nav.outerHeight();

    $(document).scroll(function () {
        //stick nav to top of page
        var scrollTop = $(this).scrollTop()

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

【讨论】：

【解决方案4】：

不需要js。仅限 CSS：position:fixed;

https://developer.mozilla.org/en-US/docs/Web/CSS/position#Fixed_positioning

https://caniuse.com/#search=fixed

【讨论】：