本文介紹了菜單背景在滾動時更改顏色的處理方法，對大家解決問題具有一定的參考價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧！
問題描述
我想要做的是當(dāng)用戶到達(dá)網(wǎng)站的下一部分時，我的菜單背景從透明變?yōu)闇\灰色.我已經(jīng)在高處和低處搜索了一個腳本，并在這里嘗試了多個，但似乎根本沒有任何效果.
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.
任何幫助將不勝感激.
謝謝
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 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%;
}
}
推薦答案
這里是一個fiddle關(guān)于如何添加類到某些滾動位置上的元素(一種基本方式).顯然，您可以將其從顏色調(diào)整為不透明度或任何其他內(nèi)容.請看這需要 jquery.
Here is a fiddle of 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 requires jquery.
但是，您無法完成這項(xiàng)工作的原因是您的 CSS 設(shè)置方式.您的標(biāo)頭的內(nèi)容 inside 的位置為 fixed，而不是 .header 本身就是應(yīng)該具有 position 的元素:固定.里面的內(nèi)容不應(yīng)該是固定的.
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 inside of your header with the position fixed, instead of the .header itself being the element that should have position: fixed. The contents inside should not be fixed.
這篇關(guān)于菜單背景在滾動時更改顏色的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！
【網(wǎng)站聲明】本站部分內(nèi)容來源于互聯(lián)網(wǎng),旨在幫助大家更快的解決問題，如果有圖片或者內(nèi)容侵犯了您的權(quán)益，請聯(lián)系我們刪除處理，感謝您的支持！