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

查看this小提琴。

创建一个名为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）的一侧。当标题重新进入视图时，该类将被删除，侧边栏会优雅地移回其原始位置。

在滚动时修改高度时，侧边栏会无法控制地跳跃

1 个答案: