我正在实现一个固定的透明标题,当页面滚动超过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>
目前header是固定的,透明的。然而,当我向下滚动时,它并没有变成黑色(尽管在检查器中似乎添加了标题滚动)。我似乎找不到任何解决问题的方法(提供的其他类似问题的建议都不起作用)……也许我错过了什么?
发布于 2019-06-11 19:18:39
希望这能有所帮助。
#header.header-scrolled {
background-color: black;
}
发布于 2019-06-11 20:22:18
我已经构建了一个简单的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');
}
})
发布于 2019-06-12 03:10:22
为了更好地阅读,我将在这里将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;
}
https://stackoverflow.com/questions/56542481
复制相似问题