如何在滚动中重新计算部分的高度以获得固定导航，以便更改类通过某些锚点？

Question

上下文

我正在开设一个单页网站，固定导航的类在滚动浏览不同部分时会发生变化，以匹配部分的背景颜色。为了达到这个效果，我使用并修改了列出here的第二个解决方案。

问题

虽然大部分时间都很有效，但是当我调整浏览器大小（或离开页面并单击后退）时导航代码会中断。更具体地说，导航的背景颜色变化太早或太晚，并且不再匹配部分的背景。

我猜这是因为部分的高度是在页面加载时计算的。理想情况下，它们会在每个卷轴上重新计算 - 但我是一个新手，这只是一个猜测。任何帮助解决这个问题将不胜感激。

的JavaScript

仅供参考：网站有四个部分（英雄，工作，关于，联系）。导航的bg颜色在Hero中应该是透明的，在工作和联系中应该是白色的，在About中应该是蓝绿色。

var afterhero = $('#hero-section').offset().top + $('#hero-section').height();
var afterwork = afterhero + $('#work-section').height();
var afterabout = afterwebsites + $('#about-section').height();

$(window).on('scroll', function() {
    stop = Math.round($(window).scrollTop());
    if (stop > afterabout) {
        $('header').removeClass('teal');
        $('header').addClass('white');
    } else if (stop > afterwork) {
        $('header').addClass('teal');
    } else if (stop > afterhero) {
        $('header').removeClass('teal');
        $('header').addClass('white');
    } else {
        $('header').removeClass('teal');    
        $('header').removeClass('white');   
    }
});

Answer 1

尝试将所有大小的变量添加到滚动事件处理程序中：

$(window).on('scroll', function() {
    var afterhero = $('#hero-section').offset().top + $('#hero-section').height();
    var afterwork = afterhero + $('#work-section').height();
    var afterabout = afterwebsites + $('#about-section').height();
    stop = Math.round($(window).scrollTop());
    if (stop > afterabout) {
        $('header').removeClass('teal');
        $('header').addClass('white');
    } else if (stop > afterwork) {
        $('header').addClass('teal');
    } else if (stop > afterhero) {
        $('header').removeClass('teal');
        $('header').addClass('white');
    } else {
        $('header').removeClass('teal');    
        $('header').removeClass('white');   
    }
});

现在afterhero，afterwork和afterabout都应在页面滚动中重新计算。