一页网站更改每个部分的菜单颜色

One page website change menu color each section

本文关键字：菜单 颜色 个部 网站 一页      更新时间：2023-09-26

我目前正在构建一个带有固定导航菜单（蓝色背景）的单页网站。这个一页的网站有4个部分，2个部分是蓝色背景，2个是白色背景。

我对这个菜单的想法是，当我在蓝色部分上滚动（而不是鼠标悬停）时，菜单背景会变成白色。当我滚动到白色部分时，背景会变回蓝色。这里有一个例子。

（不是我的网站，但滚动时查看菜单的颜色变化）

我的HTML代码如下：

<div class="subMenu" >
    <div class="inner">
        <a href="#sTop" class="subNavBtn">Home</a>
        <a href="#s1" class="subNavBtn">Over mij</a> 
        <a href="#s2" class="subNavBtn">Kennis</a>
        <a href="#s3" class="subNavBtn">Projecten</a>
        <a href="#s4" class="subNavBtn">Contact</a>
    </div>
</div>
<div class="section s1">
    <div class="inner">
        <h1>Section 1</h1>
    </div>
</div>
<div class="section s2">
    <div class="inner">
        <h1>Section 2</h1>
    </div>
</div>
<div class="section s3">
    <div class="inner">
        <h1>Section 3</h1>
    </div>
</div>
<div class="section s4">
    <div class="inner">
        <h1>Section 4</h1>
    </div>
</div>

有简单的方法吗？提前谢谢。

我已经为我的问题找到/创建了一个临时修复程序。

$(window).scroll(function(e) {
var s1 = $('.s1'),
    s2 = $('.s2'),
    s3 = $('.s3'),
    s4 = $('.s4'),
    menu = $('.menu'),
    diff = s1[0].offsetTop - window.pageYOffset;
    diff2 = s2[0].offsetTop - window.pageYOffset; 
    diff3 = s3[0].offsetTop - window.pageYOffset; 
    diff4 = s4[0].offsetTop - window.pageYOffset; 
    if(diff < 100) {
        $(".menu").addClass("white");
        $(".menu").removeClass("blue");
    }
    if(diff2 < 100) {
        $(".menu").addClass("blue");
        $(".menu").removeClass("white");
    }
    if(diff3 < 100) {
        $(".menu").addClass("white");
        $(".menu").removeClass("blue");
    }
    if(diff4 < 100) {
        $(".menu").addClass("blue");
        $(".menu").removeClass("white");
    }
    if(diff > 100) {
        $(".menu").removeClass("white");
        $(".menu").removeClass("blue");
    }

})；

JSFIDDLE演示

不确定您到底想做什么，但除非您想更改另一个元素（而不是您正在鼠标悬停的元素）的背景，否则一个简单的方法是使用:hover css选择器。

像这样：

.inner:hover{
    background-color: blue;
}

当您悬停在上面时，这将对类进行更改。

但是，如果您想对不同的元素进行更改，则需要通过javscript:附加一个事件处理程序

（粗略代码，未测试）

var menuitem = document.getElementById('menu_to_turn_other_stuff_blue'); // can use getElementsByTagName here, but you'll have to walk the HTMLCollection returned
var otheritem = document.getElementById('other_stuff_to_turn_blue');
menuitem.onmouseover = function(){ otheritem.style.backgroundColor = "blue"; } // ideally, you want to use addEventListener, not directly modifying the attribute this way, but either will work - addEventListener is however the recommended way

如果需要，可以通过addEventListener使用onmouseout或适当的事件处理程序将颜色改回。CSS解决方案将自动为此工作。

查看您给出的示例网站的来源：view source：http://www.franzsans.de/

section id="info"class="bg白色b-蓝色f-灰色"

就像jQuery的一个Fiddle 的快速示例

 $(".s1,.s2").hover(function ()
{
  $(".subMenu").removeClass("white").addClass("blue");
});
$(".s3,.s4").hover(function ()
{
  $(".subMenu").removeClass("blue").addClass("white");
});
$(".s1,.s2,.s3,.s4").mouseleave(function ()
{
 $(".subMenu").removeClass("blue").removeClass("white");
});

示例CSS:

body {
  background-color:yellow;
}
.subMenu a {
  color:black;
}
.s3, .s4, .white {
   background-color:white;
}
.s1, .s2, .blue {
   background-color:blue;
}

供参考：http://api.jquery.com/addclass/，http://api.jquery.com/removeClass/，http://api.jquery.com/hover/，http://api.jquery.com/mouseleave/

更新问题的更新：以前的问题是更改菜单的背景色，以防滚动部分被误解为悬停。随着问题的澄清，方法将是例如添加jquery inview，并根据给定链接上提供的说明在白色或蓝色部分可见时更改背景颜色（因为我不想只是从那里复制它们，最终步骤可以由OP完成）
就像在inview中使用inview new Fiddle的例子一样。无需设置样式，只需展开第一部分上方的结果窗口并向下滚动即可；你会注意到颜色会根据视图中的部分而变化。为此添加了以下内容：提到的inview.js和

$('.s1,.s2').bind('inview', changeBlue);
$('.s3,.s4').bind('inview', changeWhite);

其中CCD_ 4和CCD_。

相关文章：