菜单背景在滚动时更改颜色

2022-01-10 00:00:00 jquery navigation html css

我想要做的是当用户到达网站的下一部分时，我的菜单背景从透明变为浅灰色.我已经在高处和低处搜索了一个脚本，并在这里尝试了多个，但似乎根本没有任何效果.

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 &amp; 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.

相关文章