当点击浏览器顶部时，使用 jquery 滚动固定元素答案

【问题标题】：scrolling a fixed element using jquery, when hitting top of browser当点击浏览器顶部时，使用 jquery 滚动固定元素
【发布时间】：2011-12-07 13:42:21
【问题描述】：

我的脚本有点紧张。假设有一个元素距离我的浏览器顶部 25 像素，当我继续向下滚动时。在我的浏览器顶部触摸之前，该元素不会变成position:fixed;。然后当我向下滚动时，该元素将跟随。但是，当我滚动回顶部时，该抖动来自于该元素将跟随到我的页面顶部，然后它将自身重置回其原始位置（距顶部 25 像素）。

有没有办法消除抖动？

谢谢！

这是我的 jquery 脚本：

$(function() {
var a = function() {
    var b = $(window).scrollTop();
    var d = $("#notification-anchor").offset({scroll:false}).top;
    var c = $("#notification");
    if (b > d) {
        c.css({position:"fixed",top:"0px"})
    } else {
            if(b<=d){
        c.css({position:"relative"})
            }
    }
};
$(window).scroll(a);a()

});

【问题讨论】：

标签： jquery css scroll position

【解决方案1】：

试试下面的代码。 .toolsbar 会像 GMail 工具栏一样贴在页面顶部。这是你想要的吗？

$(function() {
    var $sidebar = $('.toolsbar');
    $window = $(window);
    offset = $sidebar.offset();
    topPadding = 0;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.css({
                'top': '0',
                'position': 'fixed'
            });
        } else {
            $sidebar.css({
                'top': '',
                'position': ''
            });
        }
    });            
});

【讨论】：