javascript - 为什么 "sticky"javascript 不能在 Firefox/IE 中运行？

Question

我在 [此站点][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/