jQuery 菜单背景在滚动时更改颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23614544/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
menu background change color on scroll
提问by Trisha
What I am trying to do is fade the background of my menu from transparent to light grey when the user reaches the next section of the site. I've searched high and low for a script, and have tried multiple ones on here but nothing seems to work at all.
我想要做的是当用户到达站点的下一部分时，将菜单的背景从透明淡化为浅灰色。我已经搜索了一个脚本，并在这里尝试了多个脚本，但似乎没有任何效果。
Any help would be greatly appreciated.
任何帮助将不胜感激。
Thanks
谢谢
HTML
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upbeat Designs | Freelance Web Design</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
</head>
<script type="text/javascript">
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".header").addClass("scrolling");
} else {
$(".header").removeClass("scrolling");
}
});
</script>
<body>
<!-- header area -->
<div class="header">
<div id="logo">
<a href="#"><img src="images/logo.png" /></a>
</div>
<nav>
<input id="nav" type="checkbox" />
<label for="nav">
<strong>Menu</strong>
<b><i></i><i></i><i></i></b>
</label>
<menu>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</menu>
</nav>
</div>
<!-- end header area -->
<div id="container-1">
<!-- landing page -->
<div class="hero">
<div class="page">
<h1>I'm <span style="color:#fff;font-weight:600">Trisha</span>, a web designer & developer from Illinois.</h1>
<p>I believe every single detail matters. My goal is to perfect the web one pixel at a time, and provide solutions through thoughtful ideas that translate into designs that last.</p>
<div class="next">
<a href="#">Let's Go.</a>
</div>
</div>
</div>
<!-- end landing page -->
<!-- about page -->
<div class="about">
<div class="page">
<h1>About Me</h1>
<p>About Me Goes here.</p>
</div>
</div></div>
</body>
</html>
CSS
CSS
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
-webkit-font-smoothing: antialiased;
}
body {
background: url(images/home-bg.jpg) no-repeat center center fixed;
background-size:cover;
color: #fff;
font: 300 1em "Open Sans", Helvetica, Arial, sans-serif;
display: table;
margin: 0 auto;
}
/*----- NAVIGATION -----*/
#logo {
position: absolute;
top: 20px;
left: 20px;
}
.header {
display: block;
position: fixed;
right: 0;
left: 0;
margin: 0;
width: 100%;
padding: 30px;
background-color:transparent;
box-sizing: border-box;
}
.header.scrolling {
background: #ccc;
}
#logo img {
width: 75%;
}
nav input {
display: none;
}
nav label {
position: absolute;
top: 50px;
right: 10px;
top: 10px;
z-index: 999;
cursor: pointer;
}
nav label strong {
padding: 0 10px;
width: 40px;
height: 40px;
line-height: 40px!important;
font: 600 1em "Open Sans", helvetica, sans-serif;
color: #fff;
text-transform: uppercase;
position: absolute;
right: 40px;
top: 0px;
transition: color 250ms ease;
-webkit-transition: color 250ms ease;
}
nav label b {
width: 40px;
height: 40px;
display: block;
position: relative;
right: 0;
top: 0;
cursor: pointer;
transition: background 500ms ease;
-webkit-transition: background 500ms ease;
}
nav label b i {
display: block;
background: #fff;
width: 24px;
height: 4px;
position: absolute;
left: 8px;
top: 11px;
transform-origin: 20px 4px;
-webkit-transform-origin: 20px 4px;
transition: transform 500ms ease, opacity 500ms ease;
-webkit-transition: transform 500ms ease, opacity 500ms ease;
}
nav label b i:nth-child(2) {
top: 18px;
}
nav label b i:nth-child(3) {
transform-origin: 26px 4px;
-webkit-transform-origin: 26px 4px;
top: 25px;
}
nav menu {
background: none;
width: 150px;
height: 50%;
opacity: 0;
transition: opacity 500ms ease;
-webkit-transition: opacity 500ms ease;
position: absolute;
z-index: 998;
top: 0;
right: 0;
}
nav menu li {
margin: 0;
list-style: none;
width: 100%;
}
nav menu li:first-child {
margin-top: 60px;
}
nav menu li:first-child a {
border-top: rgba(255, 255, 255, 0.2) 1px solid;
}
nav menu li a {
padding: 20px;
font: 100 1em "Open Sans", helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
text-align: right;
color: #fff;
display: block;
}
nav menu li a:hover {
background: rgba(0, 0, 0, 0.1);
}
nav #nav:checked ~ label strong {
color: rgba(255, 255, 255, 0.25);
}
nav #nav:checked ~ label b {
}
nav #nav:checked ~ label b i:nth-child(1) {
transform: rotate(45deg) translate(6px, 11px);
-webkit-transform: rotate(45deg) translate(6px, 11px);
transition: all 500ms ease;
-webkit-transition: all 500ms ease;
}
nav #nav:checked ~ label b i:nth-child(2) {
opacity: 0;
}
nav #nav:checked ~ label b i:nth-child(3) {
transform: rotate(-45deg) translate(10px, -14px);
-webkit-transform: rotate(-45deg) translate(10px, -14px);
transition: all 500ms ease;
-webkit-transition: all 500ms ease;
}
nav #nav:checked ~ menu {
opacity: 1;
}
/*------------------------*/
#container-1 {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: baseline;
}
.hero {
margin: auto;
height: 100%;
width: 65%;
padding: 20% 0 0;
}
.hero h1 {
font-size: 3em;
font-weight: 300;
text-align: center;
color: #ddd;
}
.hero p {
color: #ddd;
font-size: 1.5em;
font-weight: 300;
text-align: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.2);
}
.next {
margin: 80px auto;
width: 150px;
height: auto;
border: 2px solid rgba(255,255,255,0.2);
transition: background 500ms ease;
-webkit-transition: background 500ms ease;
text-align: center;
}
.next:hover {
background: rgba(255,255,255,0.5);
border: 2px solid rgba(255,255,255,0.0);
transition: background 500ms ease;
-webkit-transition: background 500ms ease;
}
.next a {
text-align: center;
line-height: 3em;
text-transform: uppercase;
letter-spacing: 0.15em;
color: #fff;
text-decoration: none;
}
.about {
background: #fff;
width: 100%;
height: 100%;
}
.about h1 {
font-size: 3em;
font-weight: 300;
text-align: left;
color: #777;
}
.about p {
color: #777;
font-size: 1.5em;
font-weight: 300;
text-align: left;
margin-top: 20px;
padding: 20px;
border-top: 1px solid rgba(255,255,255,0.2);
}
/*----- MEDIA QUERIES -----*/
@media only screen and (max-width: 480px) {
.hero {
width: 80%;
margin-top: 20%;
}
}
@media only screen and (max-width: 768px) {
.hero {
width: 80%;
}
}
回答by Justin
Here is a fiddleof how to add classes to elements on certain scroll positions (a basic way). Obviously, you can adjust it from colors to opacity or anything. Please see that this requiresjquery.
这是如何向某些滚动位置上的元素添加类的小提琴（一种基本方法）。显然，您可以将其从颜色调整为不透明度或任何其他内容。请注意，这需要jquery。
But, the reason you haven't been able to have this work is because of the way your CSS is set up. You have the contents insideof your header with the position fixed, instead of the .headeritself being the element that should have position: fixed. The contents inside should not be fixed.
但是，您无法完成这项工作的原因是您的 CSS 设置方式。你的内容中与位置你的头的fixed，而不是.header本身具有应当具有的元素position: fixed。里面的内容不应该是固定的。
回答by Benjamin Udink ten Cate
I think for your requirement https://github.com/Prinzhorn/skrollris the way to go. It is a easy to implement library that relies on css transitions and does not require jquery
我认为对于您的要求https://github.com/Prinzhorn/skrollr是要走的路。它是一个易于实现的库，它依赖于 css 转换并且不需要 jquery
it does colors, paralax, animations and more.
它可以处理颜色、视差、动画等等。
回答by TidyWorks
Binding the scroll to the window is a bad idea.
将滚动绑定到窗口是一个坏主意。
If you want to trigger a change on each section of the website have a look at jquery waypoints
如果您想在网站的每个部分触发更改，请查看 jquery waypoints
http://imakewebthings.com/jquery-waypoints/
http://imakewebthings.com/jquery-waypoints/
$('.section').waypoint({handler: function() {
$('.menu').css('background', '#ff3366');
},
offset: '50%'
});
Hope this helps.
希望这可以帮助。
