固定 header 在 window 重新加载到相同位置后不会保持固定

Question

我有这段代码可以在每次滚动 window 时添加一个固定的 header class。问题是，当 window 加载锚链接时，比方说，距离顶部 100px，它将加载 header 的原始外观，并且只会添加固定的 class 在滚动 window 之后。我该如何解决？

$(window).on("load resize", function () {
        var headerTop = $(".header").offset().top;
        var headerHeight = $(".header").outerHeight();
        $(window).on("scroll", function () {
            var scrollTop = $(window).scrollTop();
            if (scrollTop > headerTop) {
                $('.header').addClass("fixed");
            } else {
                $('.header').removeClass("fixed");
            }
        });
    });

Answer 1

您正在使用 $(".header").offset().top; 在 if (scrollTop > headerTop) 条件下进行比较，您应该与 if (scrollTop > headerHeight)

进行比较

$(".header").outerHeight(); variable has actual height of header element.

请检查以下代码：

$(window).on("load resize", function () {
    var headerTop = $(".header").offset().top;
    var headerHeight = $(".header").outerHeight();
    $(window).on("scroll", function () {
        console.log('scroll...');
        var scrollTop = $(window).scrollTop();
        if (scrollTop > headerHeight) {
            console.log('applied fiexed');
            $('.header').addClass("fixed");
        } else {
            $('.header').removeClass("fixed");
            console.log('removed fiexed');
        }
    });
});

.header{
    border:solid 1px red;
    height:50px;
    width:501px;
    background-color:#808080;
    font-size:20px;
}

.fixed{
    position:fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="header">This is header</div>
Something line 1<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Something line 2<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Something line 3<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Something line 4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Something line 5

固定 header 在 window 重新加载到相同位置后不会保持固定

Fixed header wont keep fixed after window is reloaded in same position

javascript

jquery

header

fixed