滾動后固定導航菜單

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

這里是強制性的小提琴。