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

发布于 2024-12-09 07:43:17 字数 618 浏览 0 评论 0原文

我的剧本有点不稳定。假设有一个元素距浏览器顶部 25px，当我继续向下滚动时。在我的浏览器顶部接触之前，该元素不会转动 position:fixed; 。那么当我向下滚动时该元素将跟随。然而，当我滚动回顶部时，该抖动来自于该元素将跟随到页面顶部，然后它将自身重置回其原始位置（距离顶部 25px）。

有没有办法消除抖动？

谢谢！

这是我的 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()

});

原文

There's a bit of a jitter to my script. Lets say theres an element that is 25px away from the top of my browser, and when I continue to scroll down. That element won't turn position:fixed; until the top of my browser touches. then that element will follow when I scroll down. However, that jitter is coming from when I scroll back to the top, that element will follow to the top of my page, then it will reset itself back to its orgiinal position (25px away from the top).

Is there a way to remove the jitter?

Thanks!

Here's my jquery script:

$(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()

});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鱼窥荷 2024-12-16 07:43:17

尝试使用以下代码。 .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': ''
            });
        }
    });            
});

Try with the following code. .toolsbar will stick on top of the page like GMail toolbar. Is that you want ?

$(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': ''
            });
        }
    });            
});

回复收藏 0 原文

~没有更多了~