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

Question

每次滚动窗口时，我都有这个代码来添加一个固定的标题类。问题是当窗口为锚链接加载时，比方说，距离顶部 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");
            }
        });
    });

标签： javascriptjqueryheaderfixed

Answer 1

您$(".header").offset().top;用于比较if (scrollTop > headerTop)条件，您应该与if (scrollTop > headerHeight)

$(".header").outerHeight();变量具有标题元素的实际高度。

请检查以下代码：

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