Question

我遇到了一个粘性导航/横幅图片的问题，我试图实施。请在此处查看：http://lucid-build.com/stack/sticky/ 问题是，当我调整窗口大小时，横幅的位置关闭。否则，它就像它应该的那样行事。任何有关如何解决这个问题的建议将不胜感激！

[edit]这里是剧本！

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

function fixedNav() {
    var logoT = $(".logo").offset().top;
    var bannerH = $(".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() {
    resizeBanner();
});

Answer 1

你只需要添加到你的元素的css，它有“banner”类：

position : absolute;
bottom : 0;

PS：实际上你的盒子正在调整大小，但它默认设置在你设置的标题的左上角。由于父框设置在position：relative上，所有绝对元素都将引用该父元素而不是整个文档。

窗口上的横幅位置使用粘性导航调整大小

1 个答案: