在 100vh 后更改滚动条上的导航栏颜色
Changing navbar color on scroll after 100vh
我想在滚动超过 100vh 时更改导航栏的颜色(当我从一个部分更改为另一个部分时)。我怎样才能做到这一点?我测试了这段代码,但它不起作用。
const myNav = document.getElementById('header');
window.onscroll = function () {
"use strict";
if (document.body.scrollTop > document.height ) {
myNav.classList.add("scrolled");
}
else {;
myNav.classList.remove("scrolled");
}
};
这是CSS:
header {
position: fixed;
left: 0;
top: 0;
right: 0;
transition: 0.2s;
z-index: 1000;
display: flex;
justify-content: center;
}
.scrolled {
background-color: black;
z-index: 1;
}
要获得滚动位置使用 window.scrollY
并获得视口高度使用 window.innerheight
这样做:
const myNav = document.getElementById('header')
window.onscroll = function() {
if(window.scrollY > window.innerHeight){
myNav.classList.add('scrolled')
}else{
myNav.classList.remove('scrolled')
}
}
body{
min-height: 400vh;
}
nav{
position:fixed;
top: 0;
left: 0;
height: 50px;
width: 100%;
background: green;
}
nav.scrolled{
background: black;
}
<nav id="header"></nav>
我想在滚动超过 100vh 时更改导航栏的颜色(当我从一个部分更改为另一个部分时)。我怎样才能做到这一点?我测试了这段代码,但它不起作用。
const myNav = document.getElementById('header');
window.onscroll = function () {
"use strict";
if (document.body.scrollTop > document.height ) {
myNav.classList.add("scrolled");
}
else {;
myNav.classList.remove("scrolled");
}
};
这是CSS:
header {
position: fixed;
left: 0;
top: 0;
right: 0;
transition: 0.2s;
z-index: 1000;
display: flex;
justify-content: center;
}
.scrolled {
background-color: black;
z-index: 1;
}
要获得滚动位置使用 window.scrollY
并获得视口高度使用 window.innerheight
这样做:
const myNav = document.getElementById('header')
window.onscroll = function() {
if(window.scrollY > window.innerHeight){
myNav.classList.add('scrolled')
}else{
myNav.classList.remove('scrolled')
}
}
body{
min-height: 400vh;
}
nav{
position:fixed;
top: 0;
left: 0;
height: 50px;
width: 100%;
background: green;
}
nav.scrolled{
background: black;
}
<nav id="header"></nav>