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

强制性小提琴here。

滚动后固定导航菜单

1 个答案: