菜单背景在滚动时更改颜色
Posted
技术标签:
【中文标题】菜单背景在滚动时更改颜色【英文标题】：menu background change color on scroll 【发布时间】：2014-06-30 03:23:02 【问题描述】：我想要做的是当用户到达网站的下一部分时，我的菜单背景从透明变为浅灰色。我已经在高处和低处搜索了一个脚本，并在这里尝试了多个，但似乎根本没有任何效果。
任何帮助将不胜感激。
谢谢
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
*
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%;
【问题讨论】：
尝试了哪些代码来使淡入淡出工作？而且“我只是不想找到它们。” - 嗯？ @JayBlanchard 我的意思是我已经查看了几十个试图让这个工作的脚本......我不想回去找到它们。比如这个：***.com/questions/8755887/…，我把#menu换成.header，什么也没发生。 您可以发布您尝试过的脚本，而不仅仅是链接到其他没有帮助的脚本吗？ 啊，所以您在寻找脚本或插件？如果是这样，那可能会导致您的问题被关闭。 谢谢杰，下次我会记住的。我的目的不是仅仅要求一个脚本..而是寻求帮助。 @Justin，我已将此添加到我的代码中，但它仍然无法正常工作。 upbeatdesigns.net/ud 有新代码。 【参考方案1】：这是一个fiddle，介绍了如何在某些滚动位置向元素添加类（一种基本方法）。显然，您可以将其从颜色调整为不透明度或任何其他内容。请注意，这需要 jquery。
但是，您无法完成这项工作的原因是您的 CSS 设置方式。您的标题的内容inside 的位置为fixed，而不是.header 本身就是应该具有position: fixed 的元素。里面的内容不应该是固定的。
【讨论】：
请再次检查代码，我第一次更改时没有通过ftp上传，但现在已修复。 哇.. 不敢相信我没想到。这是漫长的一天。感谢您的帮助，它成功了。我已经在脚本中添加了其他类，所以我可以改变的不仅仅是.header 类！【参考方案2】：
我认为满足您的要求https://github.com/Prinzhorn/skrollr 是要走的路。它是一个易于实现的库，依赖于 css 转换，不需要 jquery
它可以处理颜色、视差、动画等等。
【讨论】：
【参考方案3】：将滚动条绑定到窗口是个坏主意。
如果您想触发网站每个部分的更改，请查看 jquery waypoints
http://imakewebthings.com/jquery-waypoints/
$('.section').waypoint(handler: function()
$('.menu').css('background', '#ff3366');
,
offset: '50%'
);
希望这会有所帮助。
【讨论】：
以上是关于菜单背景在滚动时更改颜色的主要内容，如果未能解决你的问题，请参考以下文章