Question

我有一个随页面向下滚动的侧边栏。但是，边栏似乎落后于页面的滚动，例如。向下滚动，侧边栏显示几秒钟后。此外，侧边栏将继续向下，使页面更长，并导致页脚无法访问。我需要做什么才能使侧边栏与滚动一起移动并且侧边栏停止在页脚移动？这是我的jQuery代码：

            $(function() {

                var $sidebar   = $("aside"), 
                    $window    = $(window),
                    offset     = $sidebar.offset(),
                    topPadding = 50;

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

            });

可以在http://meddiary.com/plans-pricing/看到一个例子。修改代码很受欢迎，但只是指出我正确的方向是最好的。

Answer 1

尝试用纯CSS解决它：

.affix {
  position: fixed;
}

或者你可以使用像这样的现有jQuery插件： http://andrewhenderson.me/tutorial/jquery-sticky-sidebar/

Answer 2

这就是我解决问题的方法：

            if ($(window).width() > 767) {

                var $sidebar   = $("aside"), 
                    $window    = $(window),
                    offset     = $sidebar.offset(),
                    topPadding = 50;

                $window.scroll(function() {
                    if($window.scrollTop() > $('h3').offset().top) {
                        $sidebar.stop().css('marginTop', '680px');              
                    } else if ($window.scrollTop() > offset.top) {
                        $sidebar.stop().animate({
                            marginTop: $window.scrollTop() - offset.top + topPadding
                        }, 100, function() {
                        });
                    } else {
                        $sidebar.stop().animate({
                            marginTop: 0
                        });
                    }
                });

            };

如果视口宽于767px，

if ($(window).width() > 767)部分会阻止侧边栏滚动。 if($window.scrollTop() > $('h3').offset().top) { $sidebar.stop().css('marginTop', '680px'); }部分用于当视口顶部点击所需元素h3时，滚动停止。那部分必须是第一个因为else if语句总是正确的！然后我只是减少动画时间来阻止滞后。

粘滞侧边滚动滞后和无限滚动

2 个答案: