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

我目前正在建立一个带有固定导航菜单（带有蓝色背景）的单页网站。这一页网站有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>

有没有一种简单的方法来做到这一点？在此先感谢。

来源

2014-09-13 Fabian Wennink

jQuery是你所需要的。而不是像这些问题使用搜索引擎 – Anonymous 2014-09-13 15:35:40

我发现/创建了一个临时修复了我的问题。

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

来源

2014-09-13 17:09:42

不确定你想要做什么，除非你想改变另一个元素的背景（除了你正在移动的那个元素），否则一个简单的方法就是使用: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解决方案将为此自动工作。

来源

2014-09-13 15:38:40 mechalynx

就像简单的例子使用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完成）。
就像使用新的Fiddle with inview的示例一样。无需设置样式，只需展开第一部分上方的结果窗口并向下滚动;你会注意到颜色会根据所看到的部分而改变。为此增加了以下内容：提到的综述。js和

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

其中changeBlue()和changeWhite()函数只是从上方悬停事件。

来源

2014-09-13 15:41:12

谢谢你的评论，你给了我一个关于如何创建它的想法。我在发布答案后做了一些调查，并且发现了一个很好的临时解决方案，可以在http://jsfiddle.net/bwcym5gh/3/ – 2014-09-13 17:22:16

上找到，很高兴帮助您找到自己的解决方案。更好地提出一个想法如何解决，而不是提供将被复制的完整解决方案。 – 2014-09-13 18:04:11

看看例子网站的源你给：查看源代码：http://www.franzsans.de/

部分ID = “信息” 类= “BG-白B-蓝色F-灰色”

来源

2014-09-13 16:02:10

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

回答

相关问题