Javascript 固定收割台在窗口重新加载到相同位置后不会保持固定

我有这段代码，可以在每次滚动窗口时添加一个固定的头类。问题是，当为锚链接加载窗口时，比如说，从顶部加载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");
            }
        });
    });

您正在使用$.header.offset.top；要在if-scrollTop>headerTop条件下进行比较，应与if-scrollTop>headerHeight进行比较

$.header.outerHeight；变量具有标题元素的实际高度

请检查以下代码：

$window.onload调整大小，函数{ var headerTop=$.header.offset.top； var headerHeight=$.header.outerHeight； $window.onscroll，函数{ console.log'scroll…'； var scrollTop=$window.scrollTop； 如果scrollTop>headerHeight{ console.log“已应用fiex”； $'.header'.addClassfixed； }否则{ $'.header'.removeClassfixed； 控制台。日志“已删除封地”； } }; }; .标题{ 边框：实心1px红色； 高度：50px； 宽度：501px； 背景色：8080； 字体大小：20px； } .固定{ 位置：固定； } 这是标题 第一行 第二行 第三行 第四行 第五行