滚动后固定导航菜单

Question

我正在尝试创建一个粘贴式导航菜单，该菜单将位于横幅下方，当您向下滚动而无法再看到横幅时，导航菜单将固定在浏览器镶边的顶部。 这是我到目前为止的内容： 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中表现不同（只要向下滚动一点，便会进入固定位置）。

有见识吗？

Answer 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"); 
                }
            });
        });

这里是强制性的小提琴。