2

我正在尝试创建一个粘性导航菜单，该菜单将位于横幅的正下方，当您向下滚动并且无法再看到横幅时，导航菜单将固定在浏览器镶边的顶部。这是我到目前为止所拥有的：http: //tinyurl.com/bper44a

CSS是直截了当的，问题可能出在我的JS上：

$(document).ready(function() {
    var s = $(".navMenu");
    var pos = s.position();  
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
            if (windowpos >= pos.top) {
                s.addClass("fixedTop"); }
            else {
                s.removeClass("fixedTop"); 
                }
        });
    });

虽然它在 Firefox 中的工作方式完全符合预期，但我可以弄清楚为什么它在 Chrome 和 Safari 中的行为不同（只要向下滚动一点点就会进入固定位置）。

有什么见解吗？

4

1 回答 1

1

不知道为什么它在 Firefox 中有效，但我认为以下内容适用于所有浏览器：

$(document).ready(function() {
    var s = $(".navMenu");
    var banner = $("header > img");

    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
            // if the scroll position is greater than the height of the banner
            // fix the navigation. 
            if (windowpos >= banner.outerHeight()) {
                s.addClass("fixedTop"); }
            else {
                    s.removeClass("fixedTop"); 
                }
            });
        });

在这里必须提琴。

于 2013-05-07T23:18:25.437 回答