Javascript 从特定Div传递时更改颜色导航Div

我想将导航栏切换的颜色从白色更改为黑色和/或从黑色更改为白色

但问题是，当它到达一个单独的div，并且有一个特定的类，比如“白色”或“黑色”，当滚动开始时，颜色会改变

var stickyOffset = $(".navbar-toggle").offset();
var $contentDivs = $("section");
$(document).scroll(function() {
    $contentDivs.each(function(k) {
       var _thisOffset = $(this).offset();
       var _actPosition = _thisOffset.top - $(window).scrollTop();
       if (_actPosition < (stickyOffset.top + $('.navbar-toggle').height()/2) && _actPosition + $(this).height() - $('.navbar-toggle').height()/2 > 0) {
          $(".bar1, .bar2, .bar3, .navbar-span").removeClass("white black").addClass($(this).hasClass("white") ? "white" : "black");
       }
    });
});

var stickyOffset=$（“.navbar toggle”）.offset（）；
var$contentDivs=$（“节”）；
$（文档）。滚动（函数（）{
$contentDivs.每个（函数（k）{
var_thiscoffset=$（this.offset（）；
var\u actPosition=\u thiscaffset.top-$（window.scrollTop（）；
如果（_actPosition<（stickyOffset.top+$（'.navbar toggle'）.height（）/2）和（_actPosition+$（this.height（）-$（'.navbar toggle'）.height（）/2>0）{
$（“.bar1、.bar2、.bar3、.navbar span”）.removeClass（“黑白”）.addClass（$（this.hasglass（“白色”）？“白色”：“黑色”）；
}
});
});

现在我的JSFIDLE，但它变化非常快，我不知道我做错了什么

提前谢谢你！ 最好的，

---

卡尔

我不知道我是否正确理解了您的问题，但在我看来，您的颜色标签分配存在逻辑错误，我认为应该是这样的：

...
if (_actPosition < (stickyOffset.top + $('.navbar-toggle').height()/2) &&
    _actPosition + $(this).height() - $('.navbar-toggle').height()/2 > 0) {
          $(".bar1, .bar2, .bar3, .navbar-span").removeClass("white black")
          .addClass($(this).hasClass("white") ? "black" : "white");
}
...

。。。
如果（_actPosition<（stickyOffset.top+$（'.navbar toggle'）.height（）/2）&&
_actPosition+$（this）.height（）-$（'.navbar toggle'）.height（）/2>0）{
$（“.bar1、.bar2、.bar3、.navbar span”）.removeClass（“黑白”）
.addClass（$（this）.hasClass（“白色”）？“黑色”：“白色”）；
}
...

---

这是一个更新的JSFIDLE，我认为它工作正常

似乎问题出在这里

$(".bar1, .bar2, .bar3, .navbar-span").removeClass("white black").addClass($(this).hasClass("white") ? "white" : "black");

---

那个地方。它说，'如果$（this）有类'white'，则添加'white'，否则添加'black'。应该换个地方。希望有帮助

正如其他人已经指出的，在JSFIDLE中，这两个类应该切换，但是如果我理解正确，在初始页面加载时，如果您（例如）已经向下滚动并进行页面重新加载/刷新，或者您来自锚定链接，那么这两个类也不匹配

要解决此问题，我建议您在加载文档后也像这样运行class开关：

var stickyOffset = $(".navbar-toggle").offset();
var $contentDivs = $("section");
$(document).scroll(function() {
    checkcolor();
});

$(document).ready(function() {
    checkcolor();
});

function checkcolor()
{
    $contentDivs.each(function(k) {
        var _thisOffset = $(this).offset();
        var _actPosition = _thisOffset.top - $(window).scrollTop();
        if (_actPosition < (30 + $('.navbar-toggle').height()/2) && _actPosition + $(this).height() - $('.navbar-toggle').height()/2 > 0) {
            $(".bar1, .bar2, .bar3, .navbar-span").removeClass("white black").addClass($(this).hasClass("white") ? "black" : "white");
        }
    });

}

var stickyOffset=$（“.navbar toggle”）.offset（）；
var$contentDivs=$（“节”）；
$（文档）。滚动（函数（）{
checkcolor（）；
});
$（文档）.ready（函数（）{
checkcolor（）；
});
函数checkcolor（）
{
$contentDivs.每个（函数（k）{
var_thiscoffset=$（this.offset（）；
var\u actPosition=\u thiscaffset.top-$（window.scrollTop（）；
如果（_actPosition<（30+$（'.navbar toggle'）.height（）/2）和（_actPosition+$（this）.height（）-$（'.navbar toggle'）.height（）/2>0）{
$（“.bar1、.bar2、.bar3、.navbar span”）.removeClass（“白黑”）.addClass（$（this.hasglass（“白”）？“黑”：“白”）；
}
});
}

< >我在文档准备好的函数上添加了一个函数调用，并删除了您的StykyT偏移变量，因为在页面重新加载/刷新时，您被放置在站点的中间，偏移就是这样。粘滞偏移量必须为固定值。我刚刚在中添加了默认数字30

请看这里的小提琴：

---

哇，非常感谢您的回答，您完全理解：）谢谢您的回答：）我知道，但我不知道确切位置，非常感谢您的回答：）