Javascript 在某个区域/部分上向div添加类

我试图改变我的导航颜色时，它是一个黑暗的标题。我已经成功地做到了这一点，但是页面没有在那种状态下加载

您可以在这里看到，导航左上角从白色变为黑色，取决于它是否位于黑色顶部栏标题上方

这是我的Jquery

<script>
  var header = $('#nav_list'),
    blueSection = $('.full-header'),
    // Calculate when to change the color.
    offset = blueSection.offset().top + blueSection.height() - header.height();

  $(window).scroll(function() {
    var scroll = $(window).scrollTop();

    // Remove Class "dark" after scrolling over the dark section
    if (scroll >= offset) {
      header.removeClass('white-nav');
    } else {
      header.addClass('white-nav');
    }

    // Remove Class "no-shadows" whenever not on the top of the page.
    if (scroll >= 1) {
      header.removeClass('no-shadow');
    } else {
      header.addClass('no-shadow');
    }
  });
</script>

变量头=$（“#导航列表”），
blueSection=$（'.full header'），
//计算何时更改颜色。
offset=blueSection.offset（）.top+blueSection.height（）-header.height（）；
$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
//在滚动黑暗部分后删除类“黑暗”
如果（滚动>=偏移）{
header.removeClass（'white-nav'）；
}否则{
header.addClass（'white-nav'）；
}
//删除不在页面顶部的类“无阴影”。
如果（滚动>=1）{
header.removeClass（'no-shadow'）；
}否则{
header.addClass（'no-shadow'）；
}
});

任何帮助都会很好

关于同一问题的另一个问题。。。如何在混合中添加另一个容器，以便它在页面底部的黑色条带上滚动时也可以变成白色

先谢谢你

---

李

我认为最好的方法是使用插件

嗨！为了让人们更容易帮助您，请在这里制作一个可运行的示例，在现场，而不是在场外，因为您的问题必须在现场完全独立（例如，在上面的示例中，您没有显示任何HTML结构）。您可以使用演示问题的脚本更新您的问题，使用堆栈片段（

[]

工具栏按钮；）使其可运行。到目前为止，最好的方法是根本不使用JavaScript。相反，使用.use

$.on

和多个事件：

$（窗口）.on（'scroll load'，function（）{

），以便代码在两个事件上运行。