Question

我有一个＆＃34;粘＆＃34; [此网站] [1]上的绿色栏。当您在Chrome中滚动时，栏会向上移动并粘在页面顶部并在您继续滚动时保持固定。但我只是注意到它在Firefox或IE中没有这样做。我使用的JavaScript是下面的。任何人都有任何想法，为什么它只在Chrome中工作？（也不会在移动设备上工作，仅供参考）

// to make sub nav stick to top
jQuery(function($) {
    var docked = false;
    var menu = $('.sticky_cta');
    var init = menu.offset().top;

    $(window).scroll(function() {       
        if (!docked && (menu.offset().top - $("body").scrollTop() < 50)) {
            menu.css({
                position : "fixed",
                top: 0,
            });
            docked = true;
        } 
        else if (docked && $("body").scrollTop() <= init) {
            menu.css({
                position: "relative",
            });
            docked = false;
        }
    });
});

[1]：

Answer 1

尝试使用航点来确保您的条在所有浏览器中都显示在顶部，您会发现它非常简单易用，还有粘性元素的快捷方式。

类似的东西应该可以解决问题：

menu.waypoint({
    handler: function (direction) {
        if (direction == 'down') {
            menu.css({
                position: "fixed",
                top: 0,
            });
        } else if (direction == 'up') {
            menu.css({
                position: "relative",
            });
        }
    },
    offset: //Whatever offset you need
});

此处的文档：

http://imakewebthings.com/waypoints/

快捷方式：

http://imakewebthings.com/waypoints/shortcuts/sticky-elements/

Answer 2

尝试：

将$("body").scrollTop替换为document.documentElement.scrollTop

$("body").scrollTop我认为已弃用，在FF返回0

为什么赢得了＆＃34;粘＆＃34; javascript在Firefox / IE中工作？

2 个答案: