更改颜色导航Div当它从特定div传递时

Question

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

但问题是，当它到达具体的类如“白色”或“黑色”时，滚动开始时颜色会发生变化。

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"); 
     } 
    }); 
}); 

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

http://jsfiddle.net/xarlyblack/8mn4bucw/

预先感谢您！ 最佳， 卡尔

Answer 1

我不知道如果我理解正确的话您的问题，但在我看来，你有你的颜色标签分配一个逻辑错误，我想应该是这样的：

... 
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"); 
} 
... 

而且here是一个更新的jsfiddle中，我认为这是正常工作

Answer 2

好像问题出在

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

那个地方。它说'如果$（这个）有'白'类添加'白'，否则添加'黑'。应该改变地方。希望能帮助到你！

Answer 3

正如其他人已经指出，在你的jsfiddle中应该切换两个类，但是如果我正确地理解了你，在初始页面加载时，类也不匹配，例如，如果你已经向下滚动并创建一个页面重新加载/刷新，或者你来自锚链接。

为了解决这个问题，我建议你也办文件加载后这样的类开关：

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"); 
     } 
    }); 

} 

我添加的文档的功能调用准备，并删除你的stickyOffset变量，因为在页面重载/刷新你定位在网站的中间，偏移是方式。您的stickyOffset需要是固定值。我只是说30的默认数量

在这里看到一个小提琴： http://jsfiddle.net/5gcemfz0/3/