页面添加的脚本无法运行，控制台执行正常，求原因及解决办法

• 初始偏移量获取时机错误：代码在页面加载阶段就获取了.section-a和.section-b的offset().top值，但如果页面包含图片、动态加载内容这类会改变布局的元素，此时元素的实际位置还未完全确定，拿到的偏移量是不准确的。后续滚动时用错误的值做判断，自然无法触发正确的样式修改。
• 无效的setTimeout延迟：虽然加了3秒延迟，但无法保证3秒后页面所有元素（尤其是加载较慢的图片）都完全渲染完成，仍会导致偏移量不准。
• 控制台执行正常的原因：在控制台执行时，页面已经完全加载完毕，元素位置都已确定，此时获取的偏移量是正确的，所以逻辑能正常运行。

方法1：每次滚动时重新获取实时偏移量 #

把获取元素偏移量的代码移到滚动事件内部，确保每次滚动都拿到最新的元素位置：

<script>
    $(document).scroll(function () {
        // 每次滚动时重新计算元素偏移量
        var secHightTop = $('.section-a').offset().top;
        var secHightTopp = $('.section-b').offset().top;
        
        var pageScroll = $(document).scrollTop() + 50;
        if (pageScroll >= secHightTop) {
            $('.hamburger .line').css('background-color', 'rgb(255, 255, 255)');
            $('header .top-logo img').css('margin-top', '-42px');
        } else {
            $('.hamburger .line').css('background-color', 'rgb(255, 255, 255)');
            $('header .top-logo img').css('margin-top', '0px');
        }
        if (pageScroll >= secHightTopp) {
            $('.hamburger .line').css('background-color', 'rgb(3, 17, 153)');
            $('header .top-logo img').css('margin-top', '0px');
        }
    });
</script>

方法2：确保DOM完全就绪后绑定事件（可选优化） #

用$(document).ready()包裹代码，确保DOM结构完全渲染完成后再绑定滚动事件：

<script>
    $(document).ready(function() {
        $(document).scroll(function () {
            var secHightTop = $('.section-a').offset().top;
            var secHightTopp = $('.section-b').offset().top;
            
            var pageScroll = $(document).scrollTop() + 50;
            if (pageScroll >= secHightTop) {
                $('.hamburger .line').css('background-color', 'rgb(255, 255, 255)');
                $('header .top-logo img').css('margin-top', '-42px');
            } else {
                $('.hamburger .line').css('background-color', 'rgb(255, 255, 255)');
                $('header .top-logo img').css('margin-top', '0px');
            }
            if (pageScroll >= secHightTopp) {
                $('.hamburger .line').css('background-color', 'rgb(3, 17, 153)');
                $('header .top-logo img').css('margin-top', '0px');
            }
        });
    });
</script>

额外优化：简化样式逻辑 #

第一个if/else里.hamburger .line的颜色始终是白色，可以简化代码逻辑：

<script>
    $(document).scroll(function () {
        var secHightTop = $('.section-a').offset().top;
        var secHightTopp = $('.section-b').offset().top;
        var pageScroll = $(document).scrollTop() + 50;
        
        // 设置默认样式
        $('.hamburger .line').css('background-color', 'rgb(255, 255, 255)');
        $('header .top-logo img').css('margin-top', '0px');
        
        // 滚动到section-a但未到section-b时的样式
        if (pageScroll >= secHightTop && pageScroll < secHightTopp) {
            $('header .top-logo img').css('margin-top', '-42px');
        }
        
        // 滚动到section-b及以下的样式
        if (pageScroll >= secHightTopp) {
            $('.hamburger .line').css('background-color', 'rgb(3, 17, 153)');
        }
    });
</script>

内容的提问来源于stack exchange，提问作者Jituu