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

Question

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

但问题是，当它到达具有特定类（如“白色”或“黑色”）的特定 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");
       }
    });
});

现在我的 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

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

要解决此问题，我建议您在文档加载后也运行类切换，如下所示：

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/

Answer 3

看来问题出在

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

那个地方。它说'如果 $(this) 有类'白色'添加'白色'否则添加'黑色'。应该换地方。希望对您有所帮助！