javascript - 窗口重新加载到同一位置后，固定标题不会保持固定

Question

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

$(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