javascript - 滚动修改高度时侧边栏不受控制地跳跃

Question

我的网站上有一个固定在侧面的侧边栏，当用户向下或向上滚动时，样式属性顶部会更改以调整高度。

$(window).scroll(function() {
    if ($(this).scrollTop() < 125){
        var v = 125 - $(this).scrollTop();
        $("#sidebar").css({'top':v + 'px'});
    }
    if ($(this).scrollTop() >= 125)
    {
        $("#sidebar").css({'top':'5px'});
    }
});

但是，当我向下滚动时，侧边栏似乎不受控制地跳跃，并且没有像我想要的那样粘在屏幕上。我正在使用 Chrome 32，所以我看不出问题出在哪里。请有人帮我解决这个问题。

Answer 1

看看这个小提琴。

创建一个名为 fixed 的 CSS 类。

.fixed {
    position: fixed;
    top: 0px;
}

在滚动时，在您的 JavaScript 中相应地添加和删除“固定”类以产生适当的效果。

JavaScript：

$(function () {
    var $sidebar = $('#sidebar');
    $(window).on('scroll', function () {
        if($(this).scrollTop() < 125) {
            $sidebar.removeClass('fixed');
        } else {
            $sidebar.addClass('fixed');  
        }
    });
});

当标题滚动出窗口时，侧边栏获得“固定”类并分别粘在屏幕左上角 (0,0) 的一侧。当标题重新出现时，该类被移除，侧边栏优雅地移回其原始位置。