我想要做的是当用户到达网站的下一部分时,将菜单的背景从透明淡化为浅灰色.我已经搜索了一个脚本的高低,并在这里尝试了多个,但似乎没有任何工作.
任何帮助将不胜感激.
谢谢
HTML
I'm Trisha, a web designer & developer from Illinois.
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.
About Me
About Me Goes here.
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%; } }
Justin.. 10
这是如何在某些滚动位置(基本方式)上向元素添加类的小提琴.显然,你可以从颜色调整到不透明度或任何东西.请注意这需要 jquery.
但是,你无法完成这项工作的原因是因为CSS的设置方式.你的内容中与位置你的头的fixed
,而不是.header
本身具有应当具有的元素position: fixed
.里面的内容不应该修复.