文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >使用页面滚动更改页眉背景时出现问题

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

Stack Overflow用户
提问于 2019-06-11 19:14:48
回答 3查看 79关注 0票数 0

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

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

代码语言：javascript
复制
// Header scroll class
   $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
     $('.header').addClass('header-scrolled');
    } else {
      $('.header').removeClass('header-scrolled');
    }
  });

在main.css中，我有：

代码语言：javascript
复制
/*-------
# 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页面的格式如下：

代码语言：javascript
复制
<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>

目前header是固定的，透明的。然而，当我向下滚动时，它并没有变成黑色(尽管在检查器中似乎添加了标题滚动)。我似乎找不到任何解决问题的方法(提供的其他类似问题的建议都不起作用)……也许我错过了什么？

html
css
EN

回答 3

Stack Overflow用户

发布于 2019-06-11 19:18:39

希望这能有所帮助。

代码语言：javascript
复制
#header.header-scrolled {
  background-color: black;
}
票数 1
EN

Stack Overflow用户

发布于 2019-06-11 20:22:18

我已经构建了一个简单的JavaScript解决方案。希望你能用上它。

index.html

代码语言：javascript
复制
<!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)

代码语言：javascript
复制
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

代码语言：javascript
复制
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');
  }
})
票数 0
EN

Stack Overflow用户

发布于 2019-06-12 03:10:22

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

index.js

代码语言：javascript
复制
$(window).scroll(() => {
 if (this.pageYOffset >= 100) {
    $('#navigation').addClass('scrolled');
  }

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

为了完整起见，也可以使用html和css

index.html

代码语言：javascript
复制
<!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)

代码语言：javascript
复制
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;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/56542481

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档