Question

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

我对此菜单的想法是当我在蓝色部分滚动（不是鼠标悬停）时，菜单背景变为白色。当我滚动白色部分时，背景变回蓝色。可以找到一个示例here。

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

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

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

Answer 1

不确定你想要做什么，但是，除非你想要改变另一个元素的背景（除了那个你被忽略的元素之外），一个简单的方法就是使用: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

您可以通过onmouseout使用addEventListener或正确的事件处理程序，以便在必要时更改颜色。 CSS解决方案将自动为此工作。

Answer 2

就像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 new Fiddle with inview一样。无需设置样式，只需将结果窗口展开到第1部分上方并向下滚动;你会注意到颜色会根据视图中的部分而改变。添加了以下内容：提到的inview.js和

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

changeBlue()和changeWhite()函数只是上面的悬停事件。

Answer 3

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

section id =＆＃34; info＆＃34; class =＆＃34; bg-white b-blue f-grey＆＃34;

Answer 4

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

$(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 DEMO

单页网站每个部分都会更改菜单颜色

4 个答案: