【问题标题】:Sticky sidebar doesn't stop scrolling粘性侧边栏不会停止滚动
【发布时间】:2015-04-13 10:09:21
【问题描述】:

我的页面上有一个粘性侧边栏,使用以下脚本:

$(function() {
            var offset = $("#sidebar").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $("#sidebar").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $("#sidebar").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });

问题是它应该在到达中间块 Div 时停止滚动。目前它并没有停止滚动,而是将所有其余内容向下推。有没有办法解决这个问题?

- DEMO -

谢谢。

【问题讨论】:

    标签: javascript css sidebar sticky


    【解决方案1】:

    您需要获取.middle-block 的位置并在该点停止侧边栏滚动(减去侧边栏的高度)。

    将您的 jQuery 函数更改为:

    $(function() {
        var offset = $("#sidebar").offset();
        var mbOffset = $(".middle-block").offset();
        var mbPos = mbOffset.top - $("#sidebar").outerHeight() - 30; /*30px extra space*/
        var topPadding = 15;
        $(window).scroll(function() {
            if ($(window).scrollTop() > offset.top ) {
                if(  $(window).scrollTop() < mbPos ) {
                    $("#sidebar").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                }
            } else {
                $("#sidebar").stop().animate({
                    marginTop: 0
                });
            };
        });
    });
    

    Updated Pen

    【讨论】:

      【解决方案2】:

      您已检查侧边栏是否已移至中间框,如果是,则停止侧边栏以进行动画处理。 像这样:

      $(function() {
                  var offset = $("#sidebar").offset();
                  var boxOffset = $(".middle-block").offset().top;
                  var sidebarHeight = parseInt($("#sidebar").outerHeight());
                  var topPadding = 15;
                  $(window).scroll(function() {
                      if ($(window).scrollTop() > offset.top) {
                          if(($(window).scrollTop()+sidebarHeight)<boxOffset){
                          $("#sidebar").stop().animate({
                              marginTop: $(window).scrollTop() - offset.top + topPadding
                          });
                          }
                      } else {
                          $("#sidebar").stop().animate({
                              marginTop: 0
                          });
                      };
                  });
              });
      

      在这里查看:jsfiddle

      【讨论】:

      • 感谢您的回答。它工作正常,但我选择了 LinkinTED 的上述答案。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2018-12-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-06-09
      相关资源
      最近更新 更多