为什么“粘性”javascript在Firefox/IE中不起作用？

Question

我在这个网站上有一个“粘性”的绿色酒吧。当你在Chrome中滚动时，条形图会向上移动，粘在页面的顶部，并在滚动时保持不变。但我只是注意到它在Firefox或IE中不起作用。我使用的javascript如下。有人知道为什么它只在Chrome上工作吗？(手机也不起作用，FYI)

// 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