Question

我正在实现一个固定的透明标头，当页面滚动超过100个像素时，该标头会变成黑色。

当前，在main.js中，我有一个函数：

// Header scroll class
   $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
     $('.header').addClass('header-scrolled');
    } else {
      $('.header').removeClass('header-scrolled');
    }
  });

在main.css中，我有：

/*-------
# Header
---------*/
#header {
  padding: 3px 0;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  transition: all 0.5s;
  z-index: 997;
  background-color: transparent;
}

.header-scrolled {
  background-color: black;
}

，并且html页面的格式如下：

<header id="header" id="home">
  <div class="container">
     <li class="row align-items-center justify-content-between d-flex">
       <div id="logo">
         <a href="home.html"><img width="160" height="160" src="{% static 
         'img/my_logo.png' %}" alt="" title="" /></a>
       </div>
       <nav id="nav-menu-container">
         <ul class="nav-menu">
           <li class="menu-active"><a href="#home">{% trans "Home" %}</a> 
           </li>
           <li class="menu-active"><a href="#contacts">{% trans "Contacts" 
           %}</a></li>
         </ul>
       </nav>
     </li>
   </div>
</header>

当前，标头是固定且透明的。但是，当我向下滚动时，它不会变黑（尽管在检查器中似乎已添加标题滚动）。我似乎找不到该问题的任何解决方案（所提供的类似问题的其他建议均无效）...也许我遗漏了一些东西？

Answer 1

希望这会有所帮助。

#header.header-scrolled {
  background-color: black;
}

Answer 2

我已经构建了一个普通的JavaScript解决方案。希望您可以使用它。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./style/main.css">
  <title>Scroll CSS</title>
</head>
<body>
  <div id='navigation'>Navigation</div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga tempore obcaecati voluptas earum alias enim, inventore eaque minus possimus delectus maxime soluta provident veritatis totam aspernatur cupiditate explicabo numquam aperiam eum vel? Perferendis, culpa laudantium? Ut, esse voluptates animi aut, beatae error blanditiis nisi voluptas id illo, consequatur accusantium nihil.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga tempore obcaecati voluptas earum alias enim, inventore eaque minus possimus delectus maxime soluta provident veritatis totam aspernatur cupiditate explicabo numquam aperiam eum vel? Perferendis, culpa laudantium? Ut, esse voluptates animi aut, beatae error blanditiis nisi voluptas id illo, consequatur accusantium nihil.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga tempore obcaecati voluptas earum alias enim, inventore eaque minus possimus delectus maxime soluta provident veritatis totam aspernatur cupiditate explicabo numquam aperiam eum vel? Perferendis, culpa laudantium? Ut, esse voluptates animi aut, beatae error blanditiis nisi voluptas id illo, consequatur accusantium nihil.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga tempore obcaecati voluptas earum alias enim, inventore eaque minus possimus delectus maxime soluta provident veritatis totam aspernatur cupiditate explicabo numquam aperiam eum vel? Perferendis, culpa laudantium? Ut, esse voluptates animi aut, beatae error blanditiis nisi voluptas id illo, consequatur accusantium nihil.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga tempore obcaecati voluptas earum alias enim, inventore eaque minus possimus delectus maxime soluta provident veritatis totam aspernatur cupiditate explicabo numquam aperiam eum vel? Perferendis, culpa laudantium? Ut, esse voluptates animi aut, beatae error blanditiis nisi voluptas id illo, consequatur accusantium nihil.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga tempore obcaecati voluptas earum alias enim, inventore eaque minus possimus delectus maxime soluta provident veritatis totam aspernatur cupiditate explicabo numquam aperiam eum vel? Perferendis, culpa laudantium? Ut, esse voluptates animi aut, beatae error blanditiis nisi voluptas id illo, consequatur accusantium nihil.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga tempore obcaecati voluptas earum alias enim, inventore eaque minus possimus delectus maxime soluta provident veritatis totam aspernatur cupiditate explicabo numquam aperiam eum vel? Perferendis, culpa laudantium? Ut, esse voluptates animi aut, beatae error blanditiis nisi voluptas id illo, consequatur accusantium nihil.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga tempore obcaecati voluptas earum alias enim, inventore eaque minus possimus delectus maxime soluta provident veritatis totam aspernatur cupiditate explicabo numquam aperiam eum vel? Perferendis, culpa laudantium? Ut, esse voluptates animi aut, beatae error blanditiis nisi voluptas id illo, consequatur accusantium nihil.</p>

  <script src="./index.js"></script>
</body>
</html>

main.scss

（如果您愿意，我也可以发布生成的CSS）

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#navigation {
  position: fixed;
  height: 100px;
  width: 100%;
  background: transparent;
  text-align: center;

  transition: all 0.5s;

  &.scrolled {
    color: white;
    background: black;
  }
}

p {
  &:nth-of-type(1) {
    margin-top: 100px;
  }
  width: 50vw;
}

index.js

window.addEventListener('scroll', () => {
  const navBar = document.querySelector('#navigation')
  const { pageYOffset } = window;


  if (pageYOffset >= 100) {
    navBar.classList.add('scrolled');
  }

  if (pageYOffset < 100) {
    navBar.classList.remove('scrolled');
  }
})

Answer 3

我将在此处将jQuery解决方案作为单独的答案发布，以便更好地阅读，请为您的index.js尝试以下代码

index.js

$(window).scroll(() => {
 if (this.pageYOffset >= 100) {
    $('#navigation').addClass('scrolled');
  }

  if (this.pageYOffset < 100) {
    $('#navigation').removeClass('scrolled');
  }
})

为了完整起见，html＆css

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./style/main.css">
  <title>Scroll CSS</title>
</head>
<body>
  <div id='navigation'>Navigation</div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga tempore obcaecati voluptas earum alias enim, inventore eaque minus possimus delectus maxime soluta provident veritatis totam aspernatur cupiditate explicabo numquam aperiam eum vel? Perferendis, culpa laudantium? Ut, esse voluptates animi aut, beatae error blanditiis nisi voluptas id illo, consequatur accusantium nihil.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga tempore obcaecati voluptas earum alias enim, inventore eaque minus possimus delectus maxime soluta provident veritatis totam aspernatur cupiditate explicabo numquam aperiam eum vel? Perferendis, culpa laudantium? Ut, esse voluptates animi aut, beatae error blanditiis nisi voluptas id illo, consequatur accusantium nihil.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga tempore obcaecati voluptas earum alias enim, inventore eaque minus possimus delectus maxime soluta provident veritatis totam aspernatur cupiditate explicabo numquam aperiam eum vel? Perferendis, culpa laudantium? Ut, esse voluptates animi aut, beatae error blanditiis nisi voluptas id illo, consequatur accusantium nihil.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga tempore obcaecati voluptas earum alias enim, inventore eaque minus possimus delectus maxime soluta provident veritatis totam aspernatur cupiditate explicabo numquam aperiam eum vel? Perferendis, culpa laudantium? Ut, esse voluptates animi aut, beatae error blanditiis nisi voluptas id illo, consequatur accusantium nihil.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga tempore obcaecati voluptas earum alias enim, inventore eaque minus possimus delectus maxime soluta provident veritatis totam aspernatur cupiditate explicabo numquam aperiam eum vel? Perferendis, culpa laudantium? Ut, esse voluptates animi aut, beatae error blanditiis nisi voluptas id illo, consequatur accusantium nihil.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga tempore obcaecati voluptas earum alias enim, inventore eaque minus possimus delectus maxime soluta provident veritatis totam aspernatur cupiditate explicabo numquam aperiam eum vel? Perferendis, culpa laudantium? Ut, esse voluptates animi aut, beatae error blanditiis nisi voluptas id illo, consequatur accusantium nihil.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga tempore obcaecati voluptas earum alias enim, inventore eaque minus possimus delectus maxime soluta provident veritatis totam aspernatur cupiditate explicabo numquam aperiam eum vel? Perferendis, culpa laudantium? Ut, esse voluptates animi aut, beatae error blanditiis nisi voluptas id illo, consequatur accusantium nihil.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga tempore obcaecati voluptas earum alias enim, inventore eaque minus possimus delectus maxime soluta provident veritatis totam aspernatur cupiditate explicabo numquam aperiam eum vel? Perferendis, culpa laudantium? Ut, esse voluptates animi aut, beatae error blanditiis nisi voluptas id illo, consequatur accusantium nihil.</p>

  <script src="./index.js"></script>
</body>
</html>

main.scss

（如果您愿意，我也可以发布生成的CSS）

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#navigation {
  position: fixed;
  height: 100px;
  width: 100%;
  background: transparent;
  text-align: center;

  transition: all 0.2s;

  &.scrolled {
    color: white;
    background: black;
  }
}

p {
  &:nth-of-type(1) {
    margin-top: 100px;
  }
  width: 30vw;
}

使用页面滚动更改标题背景时出现问题

3 个答案:

index.html

main.scss

index.js

index.js

index.html

main.scss