菜单背景在滚动时更改颜色
时间：2023-02-09
本文介绍了菜单背景在滚动时更改颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想要做的是当用户到达网站的下一部分时，我的菜单背景从透明变为浅灰色.我已经在高处和低处搜索了一个脚本，并在这里尝试了多个，但似乎根本没有任何效果.
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 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%;
}
}
推荐答案
这里是一个fiddle关于如何添加类到某些滚动位置上的元素(一种基本方式).显然，您可以将其从颜色调整为不透明度或任何其他内容.请看这需要 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.
但是，您无法完成这项工作的原因是您的 CSS 设置方式.您的标头的内容 inside 的位置为 fixed，而不是 .header 本身就是应该具有 position 的元素:固定.里面的内容不应该是固定的.
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.
这篇关于菜单背景在滚动时更改颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！
相关文章
如何检查重复的 CSS 规则?How to check for duplicate CSS rules?(如何检查重复的 CSS 规则?)- 删除多个文件中的重复 CSS 声明Remove duplicate CSS declarations across multiple files(删除多个文件中的重复 CSS 声明)
- 如何复制 div onclick 事件?How can I duplicate a div onclick event?(如何复制 div onclick 事件?)
- 从谷歌驱动器打开 htmlopening html from google drive(从谷歌驱动器打开 html)
- 如何将视频从 Google 驱动器嵌入到网页?How to embed videos from Google drive to webpage?(如何将视频从 Google 驱动器嵌入到网页?)
- 如何在 iframe 中查看 Google Drive pdf 链接How to view Google drive pdf link in iframe(如何在 iframe 中查看 Google Drive pdf 链接)