Question

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

但问题是当它达到一个具有特定类别的特定div时，例如＆＃39; white＆＃39;或者＆＃39;黑色＆＃39;滚动开始时颜色会发生变化。

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中应该切换两个类，但是如果我理解正确的话，在初始页面加载时，如果你已经向下滚动并重新加载页面，那么类也不匹配/刷新或你来自锚链接。

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

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 in。

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

Answer 3

似乎问题在于

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

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

从特定div传递时更改颜色Navigation Div

3 个答案: