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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (5)

我正在实现一个固定的透明标题,当页面滚动超过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>

目前,标题是固定且透明的。然而,当我向下滚动时,它不会变黑(尽管在检查器中似乎正在添加标题滚动)。我似乎无法找到问题的任何解决方案(没有提供类似问题的其他建议工作)...也许我错过了什么?

提问于
用户回答回答于

我构建了一个简单的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');
  }
})
用户回答回答于

希望它会有所帮助。

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

扫码关注云+社区

领取腾讯云代金券