Question

我一直在努力解决一个似乎无法解决的问题请参阅此测试页：http://lucid-build.com/test/

我想要完成的是当页面调整大小为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();
});

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

谢谢！

响应式网页设计的粘滞菜单问题

0 个答案: