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');
  }

保持简单！

Answer 2

发现了这个东西，它的工作检测是否上升或下降。其余的你可以使用addclass并删除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

Answer 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');
        } 
    });

Answer 4

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

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

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

制作粘性边栏？

4 个答案: