改变颜色导航Div从特定的Div传递

Change color Navigation Div when it passed from specific div

本文关键字：Div 传递 变颜色 导航 改变      更新时间：2023-09-26

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

但问题是，当它到达一个特定的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/

提前感谢!最好的卡尔

我不知道我是否正确理解你的问题，但在我看来，你有一个逻辑错误与你的颜色标签分配，我认为它应该是这样的:

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

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

正如其他人已经指出的，在你的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/

似乎问题出在

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

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

相关文章：