0

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

$(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,所以我看不出问题出在哪里。请有人帮我解决这个问题。

4

1 回答 1

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) 的一侧。当标题重新出现时,该类被移除,侧边栏优雅地移回其原始位置。

于 2013-11-11T21:57:21.547 回答