Jquery 具有响应性网页设计的粘性菜单问题

我一直在与一个似乎无法解决的问题作斗争。
请参阅本测试页面：

我试图实现的是，当页面大小调整到979px及以下时，页眉会切换到移动版本，然后导航粘滞物的位置会调整到徽标区域的顶部，就像它被拉伸到980px以上一样

以下是我的脚本：

function resizeBanner() {
    var bannerH = $(".banner img").height();
    $(".banner").css("height", bannerH);
}

if($(window).width() <= 979) {
    alert("mobile");
    function fixedNav() {
        var logoT = $(".logo img").offset().top;
        var bannerH = $(".banner img").height();

        $(window).resize(function() {
            $(".banner img").height();
        });

        $(window).scroll(function() {
            if($(window).scrollTop() > logoT ) {
                $("#header").addClass("fixed").css(("height"),159);
                $(".banner").css(("margin-top"),-bannerH+159);
                $("body").css(("margin-top"),bannerH+22);
            } else {
                $("#header").removeClass("fixed").css(("height"),("auto"));
                $(".banner").css(("margin-top"),0);
                $("body").css(("margin-top"),0);
            }
        });
    } 
} else {
    alert("desktop");
    function fixedNav() {
        var logoT = $(".logo img").offset().top;
        var bannerH = $(".banner img").height();

        $(window).resize(function() {
            $(".banner img").height();
        });

        $(window).scroll(function() {
            if($(window).scrollTop() > logoT ) {
                $("#header").addClass("fixed").css(("height"),120);
                $(".banner").css(("margin-top"),-bannerH+120);
                $("body").css(("margin-top"),bannerH+18);
            } else {
                $("#header").removeClass("fixed").css(("height"),("auto"));
                $(".banner").css(("margin-top"),0);
                $("body").css(("margin-top"),0);
            }
        });
    }
};

$(window).resize(function() {
    resizeBanner();
});

$(window).load(function() {
    resizeBanner();
    fixedNav();
});

$(document).ready(function() {
    $("body").hide();
    $("body").fadeIn("slow");

    resizeBanner();
});

函数resizeBanner（）{
var bannerH=$（“.banner img”）.height（）；
$（“.banner”）.css（“高度”，bannerH）；
}
如果（$（窗口）.width（）标识）{
$（“#页眉”）.addClass（“固定”）.css（（“高度”），159；
$（“.banner”）.css（（“页边空白顶部”），-bannerH+159）；
$（“正文”）.css（（“页边空白顶部”），横幅右侧+22；
}否则{
$（“#头”）.removeClass（“固定”）.css（（“高度”），（“自动”）；
$（“.banner”）.css（（“页边顶部”），0；
$（“正文”）.css（（“页边空白”），0；
}
});
} 
}否则{
警报（“桌面”）；
函数fixedNav（）{
var logoT=$（“.logo img”）.offset（）.top；
var bannerH=$（“.banner img”）.height（）；
$（窗口）。调整大小（函数（）{
$（“.banner img”）.height（）；
});
$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>logoT）{
$（“#页眉”）.addClass（“固定”）.css（（“高度”），120；
$（“.banner”）.css（（“页边空白顶部”），-bannerH+120）；
$（“正文”）.css（（“页边空白顶部”），横幅右侧+18；
}否则{
$（“#头”）.removeClass（“固定”）.css（（“高度”），（“自动”）；
$（“.banner”）.css（（“页边顶部”），0；
$（“正文”）.css（（“页边空白”），0；
}
});
}
};
$（窗口）。调整大小（函数（）{
resizeBanner（）；
});
$（窗口）。加载（函数（）{
resizeBanner（）；
固定导航（）；
});
$（文档）.ready（函数（）{
$（“body”）.hide（）；
$（“body”）.fadeIn（“slow”）；
resizeBanner（）；
});

您可能还注意到，当调整979px及以下的大小时，它开始在滚动条上执行各种奇怪的操作：(

---

谢谢！

您可能想查看CSS媒体查询。媒体查询正是为此而设计的。浏览器计算CSS的速度比JS快得多。