菜单背景更改颜色在滚动 [英] menu background change color on scroll
本文介绍了菜单背景更改颜色在滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当用户到达网站的下一个部分时，我想要做的是将菜单的背景从透明变为浅灰色。我已经搜索了一个脚本的高和低，并尝试了多个在这里，但没有什么似乎工作。
任何帮助将非常感激。 p>
感谢
HTML
<！doctype html>
< html>
< head>
< meta charset =utf-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0>
< title> Upbeat Designs |自由网页设计< / title>
< link rel =stylesheethref =style.csstype =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 =navtype =checkbox/>
< label for =nav>
< strong>菜单< / strong>
< b>< i>< / i>< i>< / i>< i>< / i>< / b&
< / label>
< menu>
< li>< a href =＃>首页< / a>< / li&
< li>< a href =＃>关于< / a>< / li&
< li>< a href =＃>服务< / a>< / li>
< li>< a href =＃> Portfolio< / a>< / li>
< li>< a href =＃>联系人< / a>< / li&
< / menu>
< / nav>
< / div>
<！ - end header area - >
< div id =container-1>
<！ - 着陆页 - >
< div class =hero>
< div class =page>
< h1>我是< span style =color：#fff; font-weight：600> Trisha< / span&来自伊利诺伊州的开发人员。< / h1>
< p>我相信每一个细节都很重要。我的目标是一次完成一个像素的网络，并通过周到的想法，提供解决方案，转化为设计的持续。< / p>
< div class =next>
< a href =＃>让我们走吧。< / a>
< / div>
< / div>
< / div>
<！ - 结束着陆页 - >
<！ - about page - >
< div class =about>
< div class =page>
< h1>关于我< / h1>
< p>关于我Goes here。< / p>
< / div>
< / div>< / div>
< / body>
< / html>
CSS
* {
margin：0;
padding：0;
}
html，body {
height：100％;
-webkit-font-smoothing：antiialiased;
}
body {
background：url（images / home-bg.jpg）no-repeat center center fixed;
background-size：cover;
color：#fff;
font：300 1emOpen 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 1emOpen 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）
}
nav menu li a {
padding：20px;
font：100 1emOpen 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 bi：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;
}
.bout 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％;
}
}
解决方案
是如何向某些滚动位置的元素添加类的小提琴（基本方法）。显然，你可以调整从颜色到不透明度或任何东西。请查看此要求 jquery 。
但是，你没能得到这个工作的原因是因为CSS的设置方式。您的标头中的内容位于 fixed ，而不是 .header 本身是应该有 position：fixed 的元素。其中的内容不应该是固定的。
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
<!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%;
}
}
解决方案
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.
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.
这篇关于菜单背景更改颜色在滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
