导航颜色在不同部分上滚动时不会改变

Question

您好，当我滚动到不同的区域并且不知道为什么时，导航栏不会更改颜色。我用谷歌搜索并尝试了很多东西，但是还没有人工作。感谢所有帮助我使其运行的人！谢谢。

我有另一面，我在导航上使用完全相同的js和css，但是在此站点上它不起作用。

这是代码和脚本：

// JavaScript Document
console.log("geladen...");
var top1 = $('#01').offset().top;
var top2 = $('#02').offset().top;
var top3 = $('#section03').offset().top;
var top4 = $('#section04').offset().top;
var top5 = $('#section04').offset().top;

$(document).scroll(function() {
  var scrollPos = $(document).scrollTop();
  if (scrollPos >= top1 && scrollPos < top2) {
    $('.nav').css('background-color', 'rgba(140, 19, 48, .75)');
  } else if (scrollPos >= top2 && scrollPos < top3) {
    $('.nav').css('background-color', 'rgba(155, 168, 93, .75)');
  } else if (scrollPos >= top3 && scrollPos < top4) {
    $('.nav').css('background-color', 'rgba(155, 182, 204, .75)');
  } else if (scrollPos >= top4 && scrollPos < top5) {
    $('.nav').css('background-color', 'hsla(30, 78%, 67%, .8)');
  } else if (scrollPos >= top5) {
     $('.nav').css('background-color', 'rgba(140, 19, 48, .75)');
  }
});

*{
     margin: 0 0 0 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Poppins', sans-serif;
     font-weight: 400;
     outline: none;
}

body {
  background-color: #f8ffef;
}

h1 {
  text-align: center;
  margin: 0;
}

ul {
list-style: none;
}
/*HEADER*/
 nav {
     display: flex;
     justify-content: space-around;
     align-items: center;
     min-height: 8vh;
     font-family: 'Poppins', sans-serif;
     font-weight: 400;
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 1000;
	 background-color: rgba(140, 19, 48, .8);
}

 .logo {
     color: white;
     letter-spacing: 6px;
     text-transform: uppercase;
     font-size: 20px;
}
 .navul {
     display: flex;
     width: 45%;
     color: white;
     list-style: none;
     justify-content: space-around;
}
 .navul a {
     text-decoration: none;
     color: white;
     letter-spacing: 2px;
     font-size: 14px;
}
 .burger {
     display: none;
     cursor: pointer;
}
 .burger div {
     width: 25px;
     height: 3px;
     color: white;
     margin: 5px;
     background-color: white;
     transition: all 0.3s ease;
}
 @media screen and (max-width:768px){
     body{
         overflow-x: hidden;
    }
     .navul {
         position: absolute;
         right: 0px;
         height: 64vh;
         top: 8vh;
         display: flex;
         flex-direction: column;
         align-items: center;
         width: 50%;
         transform: translateX(100%);
         transition: transform 0.5s ease-in;
         background-color: #495867;
    }

    .hero-text {
      width: 100%
      left:50%!important;
      position:relative!important;
    }
    .hero-text h2 {
      width: 50%;
      margin: 0;
      font-size: 2em!important;
    }
     .navul li {
         opacity: 0;
    }
     .burger {
         display: block;
    }
}
 .nav-active {
     transform: translateX(0%);
     z-index: 100;
}

@keyframes navlinkfade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

.toggle .line01 {
  transform: rotate(-45deg) translate(-5px,6px);
}

.toggle .line02 {
  opacity: 0;
}

.toggle .line03 {
  transform: rotate(45deg) translate(-5px,-6px);
}

/* HERO */

.hero-image {
   background-image: url("../img/hero2.jpg");
   height: 800px;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
}

.buttonhero {
  width: 50%;
  height: 40px;
  background-color: transparent;
  color: white;
  border: 2px solid white;
  cursor: pointer;
}

.hero-text {
  position: absolute;
  top: 50%;
  left: 75%;
  transform: translate(-50%, -50%);
  color: white;
  overflow: hidden;
}

.hero-text h2 {
  align-items: center;
  font-size: 3em;
  overflow: hidden;
}

/* STEMPEL */

#stempel {
  width: 35%;
  height: auto;
  margin-left: 32.5%;
  margin-right: 32.5%;
  margin-top: 3%;
  margin-bottom: 3%;
}

/* SECTION ABOUT */

#aboutus {
  margin-top: 5%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 5%;
}

.headline {
  width: 100%;
}

#aboutustext {
  width: 30%;
}

#aboutusbilder {
  width: 30%;
}

hr {
  width: 35%;
  border: 3px solid #CFD5AF;
  margin: auto;
  margin-bottom: 5%;
}

/* PRODUCTS */

#section03 {
  background-color: #a0c685;
  padding-bottom: 3%;
  padding-top: 3%;
  margin-bottom: 5%;
}

#produkte {
  display: flex;
  justify-content: space-around;
}

/*HERSTELLUNG*/

#herstellungtext {
  width: 60%;
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 5%;
  margin-bottom: 5%;
}

#herstellungtext h2 {
  margin: 0 0 2% 0;
}

/*KONTAKT*/

#section05 {
  background-color: #495867;
  padding-top: 5%;
  padding-bottom: 5%;
}

#kontaktbox {
  display: flex;
  justify-content: space-around;
}

.überschrift  {
  color: white;
  text-align: center;
  margin-bottom: 5%;
}

.überschrift h1 {
  color: #495867;
}

.überschrift-02 {
  color: white;
  text-align: center;
  margin-bottom: 5%;
}

#kontaktdaten {
  color: white;
}

.wrapper{
  width: 100%;
  padding: 0 20px;
}

.contact-form{
  display: flex;
  max-width: 550px;
  margin: 0 auto;
}

.input-fields{
  display: flex;
  flex-direction: column;
  margin-right: 4%;
}

.input-fields,
.msg{
  width: 48%;
}

.input-fields .input,
.msg textarea{
  margin: 10px 0;
  background: transparent;
  border: 0px;
  border-bottom: 2px solid #cfd5af;
  padding: 10px;
  color: #F7f8f3;
  width: 100%;
}

.msg textarea{
  height: 212px;
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #F7f8f3;
}
::-moz-placeholder {
  /* Firefox 19+ */
  color: #F7f8f3;
}
:-ms-input-placeholder {
  /* IE 10+ */
  color: #F7f8f3;
}

.btn {
    background: #cfd5af;
    text-align: center;
    padding: 15px;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
}

@media screen and (max-width: 600px){
  .contact-form{
    flex-direction: column;
  }
  .msg textarea{
    height: 80px;
  }
  .input-fields,
  .msg{
    width: 100%;
  }
}

/*FOOTER*/

.footer-distributed{
	background-color: #CFD5AF;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	width: 100%;
	text-align: left;
	font: bold 16px sans-serif;

	padding: 55px 50px;
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
	display: inline-block;
	vertical-align: top;
}


.footer-distributed .footer-left{
	width: 40%;
}


.footer-distributed h3{
	color:  #ffffff;
	font: normal 36px 'Cookie', cursive;
	margin: 0;
}

.footer-distributed h3 span{
	color:  #5383d3;
}


.footer-distributed .footer-links{
	color:  #ffffff;
	margin: 20px 0 12px;
	padding: 0;
}

.footer-distributed .footer-links a{
	display:inline-block;
	line-height: 1.8;
	text-decoration: none;
	color:  inherit;
}

.footer-distributed .footer-company-name{
	color:  #8f9296;
	font-size: 14px;
	font-weight: normal;
	margin: 0;
}


.footer-distributed .footer-center{
	width: 35%;
}

.footer-distributed .footer-center i{
	background-color:  #33383b;
	color: #ffffff;
	font-size: 25px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	text-align: center;
	line-height: 42px;
	margin: 10px 15px;
	vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope{
	font-size: 17px;
	line-height: 38px;
}

.footer-distributed .footer-center p{
	display: inline-block;
	color: #ffffff;
	vertical-align: middle;
	margin:0;
}

.footer-distributed .footer-center p span{
	display:block;
	font-weight: normal;
	font-size:14px;
	line-height:2;
}

.footer-distributed .footer-center p a{
	color:  #5383d3;
	text-decoration: none;;
}


.footer-distributed .footer-right{
	width: 20%;
}

.footer-distributed .footer-company-about{
	line-height: 20px;
	color:  #92999f;
	font-size: 13px;
	font-weight: normal;
	margin: 0;
}

.footer-distributed .footer-company-about span{
	display: block;
	color:  #ffffff;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 20px;
}

.footer-distributed .footer-icons{
	margin-top: 25px;
}

.footer-distributed .footer-icons a{
	display: inline-block;
	width: 35px;
	height: 35px;
	cursor: pointer;
	background-color:  #33383b;
	border-radius: 2px;

	font-size: 20px;
	color: #ffffff;
	text-align: center;
	line-height: 35px;

	margin-right: 3px;
	margin-bottom: 5px;
}


@media (max-width: 880px) {

	.footer-distributed{
		font: bold 14px sans-serif;
	}

	.footer-distributed .footer-left,
	.footer-distributed .footer-center,
	.footer-distributed .footer-right{
		display: block;
		width: 100%;
		margin-bottom: 40px;
		text-align: center;
	}

	.footer-distributed .footer-center i{
		margin-left: 0;
	}

}

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Spieker Manufaktur</title>
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,700" rel="stylesheet">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript" src="js/smoothscroll.js"></script>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <header id="change">
        <section id="01">
            <nav class="nav">

                <div class="logo">
                    <h4>Spieker Manufaktur</h4>
                </div>

                <ul class="navul">
                    <li><a data-scroll href="#01">Home</a></li>
                    <li><a data-scroll href="#02">Über Uns</a></li>
                    <li><a data-scroll href="#section03">Produkte</a></li>
                    <li><a data-scroll href="#section04">Herstellung</a></li>
                </ul>
                <div class="burger">
                    <div class="line01"></div>
                    <div class="line02"></div>
                    <div class="line03"></div>
                </div>
            </nav>
        </section>
	</header>
    <div class="hero-image">
   <div class="hero-text">
    <h2>Lorem Ipsum Dolor Si Amet</h2>
    <button class="buttonhero">Jetzt Entdecken</button>
  </div>
</div>

    <main>
        <section id="02">
            <img id="stempel" alt="stempel" src="img/kasten.png">
            <section id="aboutus">
                <div class="headline">
                    <h1> ÜBER UNS UND UNSERE PRODUKTE </h1>
                    <hr id="headline01">
                </div>
                <section id="aboutustext">
                    <p> <h2>Lorem Ipsum Dolor?</h2> <hr> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ex nec massa blandit lacinia. Proin cursus a justo sed fringilla. Donec tempus erat sed enim egestas, et egestas odio rutrum. Fusce quis metus tincidunt, euismod lectus eget, condimentum dui. Vestibulum varius laoreet libero, ac dapibus est interdum sed. Curabitur sit amet interdum erat. Curabitur posuere, tortor ut pretium ultricies, diam nisi posuere purus, vitae tempor odio sem sed risus. Nam aliquet aliquet lacinia. Phasellus felis lectus, lacinia eu suscipit volutpat, ultricies et felis. Etiam in pellentesque felis. Etiam tincidunt tortor volutpat luctus tristique. Aliquam non turpis est.

 </p>
                </section>
                <section id="aboutusbilder">
                    <img id="bild02.1" alt="02.1" src="img/placeholder.png">
                    <img id="bild02.2" alt="02.2" src="img/placeholder.png">
                </section>
            </section>
        </section>

        <section id="section03">
            <div class="überschrift">
                <h1> UNSERE PRODUKTE </h1>
                <hr id="headline02">
            </div>
            <section id="produkte">
              <div class="product"> <img src="img/product.png" alt=""> </div>
              <div class="product"> <img src="img/product.png" alt=""> </div>
              <div class="product"> <img src="img/product.png" alt=""> </div>
            </section>
        </section>

        <section id="section04">
            <div class="überschrift">
                <h1> DIE HERSTELLUNG </h1>
                <hr id="headline03">
            </div>
            <section id="herstellungtext">

              <h2>Lorem Ipsum Dolor Si ?</h2>

                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non ex nec massa blandit lacinia. Proin cursus a justo sed fringilla. Donec tempus erat sed enim egestas, et egestas odio rutrum. Fusce quis metus tincidunt, euismod lectus eget, condimentum dui. Vestibulum varius laoreet libero, ac dapibus est interdum sed. Curabitur sit amet interdum erat. Curabitur posuere, tortor ut pretium ultricies, diam nisi posuere purus, vitae tempor odio sem sed risus. Nam aliquet aliquet lacinia. Phasellus felis lectus, lacinia eu suscipit volutpat, ultricies et felis. Etiam in pellentesque felis. Etiam tincidunt tortor volutpat luctus tristique. Aliquam non turpis est.

Sed eu nisi velit. Quisque vel metus ut enim euismod luctus. Ut vulputate congue sem, sed vestibulum dui auctor eget. Integer ut nisl nec neque efficitur dignissim. Phasellus vehicula lacus non magna ornare, sed scelerisque libero congue. Etiam in purus vel tortor tempor accumsan sed sit amet diam. Mauris id dolor sed odio interdum ultricies ut eu neque. Nullam mollis ullamcorper felis. Quisque et mattis est. Donec sed ullamcorper nisl. Maecenas convallis ante congue, vestibulum eros vitae, tincidunt nibh.

Ut condimentum purus id elit volutpat tristique. Vestibulum faucibus magna et velit euismod, at laoreet nisl iaculis. Etiam maximus eu sapien non iaculis. Ut neque tellus, varius nec tempus et, egestas ut dui. Ut euismod commodo sem eu faucibus. Proin id ipsum vel erat auctor feugiat in eget augue. Integer elit neque, mattis quis lacinia at, posuere sagittis lacus. </p>
            </section>

        </section>

        <section id="section05">
            <div class="überschrift-02">
                <h1> KONTAKT </h1>
                <h2> Schreibe uns gerne eine Nachricht! </h2>
            </div>

            <section id="kontaktbox">
                <section id="kontaktdaten">
                  <ul>
					<li><i class="fas fa-map-marker-alt"></i>Lorem Ipsum Straße 2</li>
                    <li><i class="fas fa-envelope"></i>Muster@mann.de</li>
                    <li><i class="fas fa-phone"></i>040-67-68-394</li>
                  </ul>
                </section>
                <section id="kontaktformular">
                  <div class="wrapper">
  <div class="contact-form">
    <div class="input-fields">
      <input type="text" class="input" placeholder="Name">
      <input type="text" class="input" placeholder="Email Address">
      <input type="text" class="input" placeholder="Phone">
      <input type="text" class="input" placeholder="Subject">
    </div>
    <div class="msg">
      <textarea placeholder="Message"></textarea>
      <div class="btn">send</div>
    </div>
  </div>
</div>
                </section>
            </section>
          </section>

    </main>
<section id="section06">
   		<footer class="footer-distributed">

			<div class="footer-left">

				<h3>Company<span>logo</span></h3>

				<p class="footer-links">
					<a href="#01">Home</a>
					·
					<a href="#02">Über Uns</a>
					·
					<a href="#section03">Produkte</a>
					·
					<a href="#section04">Herstellung</a>

				</p>

				<p class="footer-company-name">Spieker Manufaktur &copy; 2019</p>
			</div>

			<div class="footer-center">

				<div>
					<i class="fa fa-map-marker"></i>
					<p><span>asdgasgdasgfsad</span> dfsadfsadfsadfa</p>
				</div>

				<div>
					<i class="fa fa-phone"></i>
					<p>+1 555 123456</p>
				</div>

				<div>
					<i class="fa fa-envelope"></i>
					<p><a href="mailto:support@company.com">muster@mann.de</a></p>
				</div>

			</div>

			<div class="footer-right">

				<p class="footer-company-about">
					<span>About the company</span>
					Lorem ipsum dolor sit amet, consectateur adispicing elit. Fusce euismod convallis velit, eu auctor lacus vehicula sit amet.
				</p>

				<div class="footer-icons">
<!--falls sie Social Medias haben wollen!-->
					<a href="#"><i class="fab fa-facebook-f"></i></a>
					<a href="#"><i class="fab fa-twitter"></i></a>

				</div>

			</div>

		</footer>
	</section>

    <script type="text/javascript" src="js/script.js"></script>
	<script>	$('a[href*="#"]').on('click',function(e) {
 e.preventDefault();
 var target = this.hash;
 var $target = $(target);
 $('html, body').stop().animate({
  'scrollTop': $target.offset().top
 }, 900, 'swing', function () {
  window.location.hash = target;
 });
});
	</script>
	

</body>
</html>

Answer 1

.navbar选择器不存在，而是将其更改为.nav。

错误： $（'。navbar'） .css（'background-color'，'rgba（140，19，48，.75）'）;

右： $（'。nav'） .css（'background-color'，'rgba（140，19，48，.75）'）;

Answer 2

放入a。 （点）在CSS样式表中的导航之前。您正在更改.nav的CSS，但是样式表中没有.nav

.nav { // previously it was nav { ...
     display: flex;
     justify-content: space-around;
     align-items: center;
     min-height: 8vh;
     font-family: 'Poppins', sans-serif;
     font-weight: 400;
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 1000;
     background-color: rgba(140, 19, 48, .8);
}

更新HTML：

<div class="nav">
      <nav>
                <div class="logo">
                    <h4>Spieker Manufaktur</h4>
                </div>

                <ul class="navul">
                    <li><a data-scroll href="#01">Home</a></li>
                    <li><a data-scroll href="#02">Über Uns</a></li>
                    <li><a data-scroll href="#section03">Produkte</a></li>
                    <li><a data-scroll href="#section04">Herstellung</a></li>
                </ul>
                <div class="burger">
                    <div class="line01"></div>
                    <div class="line02"></div>
                    <div class="line03"></div>
                </div>
      </nav>
</div>