滚动js问题上的固体导航栏

Question

我已经坚持了一段时间。

我正在尝试更改滚动时导航栏的颜色。我可以为它下面的 para 标签，以及不同的 li 标签或导航标志这样做，但不能以某种方式为整个导航。

有解决办法吗？？

显然这里也显示了一个 JS 错误....代码在我的机器上运行良好。

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 50) {
      document.getElementById('para').classList.add('test');
    } else {
      //  $('.para').removeClass('.test');
      document.getElementById('para').classList.remove('test');
    }
  });
});

body {
  margin: 0;
  font-family: Helvetica, sans-serif;
  background-color: #f4f4f4;
}

a {
  color: #000;
}


/* header */

.test {
  background-color: yellow;
}

.header {
  background-color: rgba(250, 246, 246, 0.6);
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .3);
  position: sticky;
  width: 100%;
  z-index: 33;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  /* background-color: rgba(250, 246, 246, 0.4); */
  /* background-color: #fff; */
}

.header li a {
  display: block;
  padding: 20px 20px;
  /* border-right: 1px solid #f4f4f4; */
  text-decoration: none;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: #f4f4f4;
}

.header .logo {
  display: block;
  float: left;
  font-size: 2em;
  padding: 10px 20px;
  text-decoration: none;
}


/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}


/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: white .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}


/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked~.menu {
  max-height: 240px;
}

.header .menu-btn:checked~.menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked~.menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked~.menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
  top: 0;
}

@media (min-width: 48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}

<div id="para">
  <nav class="header sticky-top">
    <a href="" class="logo">CSS Nav</a>
    <input class="menu-btn" type="checkbox" id="menu-btn" />
    <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
    <ul class="menu">
      <li><a href="#work">Toekization 101</a></li>
      <li><a href="#about">Earn</a></li>
      <li><a href="#careers">Team</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</div>
<br><br>br
<br><br>
<p style="position:fixed;">When you have scrolled 50 pixels from the top, add the class "test" (yellow background color) to the paragraph. Scroll up again to remove the class.</p>


<br><br><br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>dddd
<br>
<br> dddd
<br>
<br>

Answer 1

现在它适用于片段。我在新的 JQuery 标签中添加了 src script

但是在您的代码中，您引用了 window.scroll，因此在代码段 scroll 时看不到它。

我将 shock 类添加到您的固定 div 中，以便在颜色更改时更好地查看。有用 。查看整页剪辑。

$(document).ready(function() {
  $(window).scroll(function() {
    console.log($(this).scrollTop());
    if ($(this).scrollTop() > 50) {
        //document.getElementById('para').classList.add('test');  
        $('#para').addClass('test');
        $('.shock').addClass('test');
    } else {
      $('#para').removeClass('.test');      
      $('.shock').removeClass('test');
    }
  });
});

body {
  margin: 0;
  font-family: Helvetica, sans-serif;
  background-color: #f4f4f4;
}

a {
  color: #000;
}


/* header */

.test {
  background-color: red;
}

.header {
  background-color: rgba(250, 246, 246, 0.6);
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .3);
  position: sticky;
  width: 100%;
  z-index: 33;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  /* background-color: rgba(250, 246, 246, 0.4); */
  /* background-color: #fff; */
}

.header li a {
  display: block;
  padding: 20px 20px;
  /* border-right: 1px solid #f4f4f4; */
  text-decoration: none;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: #f4f4f4;
}

.header .logo {
  display: block;
  float: left;
  font-size: 2em;
  padding: 10px 20px;
  text-decoration: none;
}


/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}


/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: white .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}


/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked~.menu {
  max-height: 240px;
}

.header .menu-btn:checked~.menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked~.menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked~.menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
  top: 0;
}

@media (min-width: 48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head> 
<body>

<div id="para">
  <nav class="header sticky-top">
    <a href="" class="logo">CSS Nav</a>
    <input class="menu-btn" type="checkbox" id="menu-btn" />
    <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
    <ul class="menu">
      <li><a href="#work">Toekization 101</a></li>
      <li><a href="#about">Earn</a></li>
      <li><a href="#careers">Team</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</div>
<br><br>br
<br><br>

<p class="shock" style="position:fixed;">When you have scrolled 50 pixels from the top, add the class "test" (yellow background color) to the paragraph. Scroll up again to remove the class.</p>

<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>dddd
<br>
<br> dddd
<br>
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>
<br> dddd
<br>dddd
<br>
<br> dddd
<br>
<br>
</body>
</html>

Answer 2

我对你的 css 和 html 进行了一些更改，然后它对我也适用

在导航标签上添加id

<nav class="header" id="myHeader">

在JS中：

// when the user start scrolling
window.addEventListener('scroll',()=>{

// now call the background
const myBackground = document.getElementById('myHeader');

// now the condition when the user start scrolling then change the color
if(window.pageYOffset > 50){
   myBackground.classList.add("is-sticky");
}

// when the header be in the top of the page that mean window.pageYOffset = 0 so
else{
    myBackground.classList.remove("is-sticky");
}
})

所以现在你必须在 css 中设置这个类的样式：

.is-sticky{ background-color: yellow;}

在您的代码中，粘滞条不起作用，因此您必须将其更改为固定位置

.header {
   background-color: rgba(250, 246, 246, 0.6);
   box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .3);
   position: fixed;
   top: 0%;
   width: 100%;
   z-index: 33;
 }

它对我有用，我希望它也对你有用，祝你好运