Javascript 的粘性导航
Sticky navigation with Javascript
我正在做一个粘性导航,但是当我快速滚动时它不起作用..只有当我缓慢滚动时才会起作用但并不总是..
这是CSS:
div.sticky {
position: fixed;
}
和 Javascript:
window.addEventListener("scroll", function() {
var nav = document.getElementsByClassName("nav_lista")[0];
if(window.scrollY > 200) {
nav.className += " " + "sticky";
nav.style.top = 0;
} else if (window.scrollY < 200) {
nav.classList.remove("sticky");
nav.style.top = null;
}
});
知道错误在哪里吗?
谢谢!
我没有看到你的问题...
这是一个 fiddle 我认为代表你的问题:https://jsfiddle.net/5gua3nto/2/
此处相同的代码段:
window.addEventListener("scroll", function() {
var nav = document.getElementById("menu");
if(window.scrollY > 500) {
nav.className += " " + "sticky";
nav.style.top = 0;
} else if (window.scrollY < 500) {
nav.classList.remove("sticky");
nav.style.top = null;
}
});
div.sticky {
position: fixed;
}
#wrap{
height: 8000px;
background-color: black;
}
#menu
{
background-color: red;
height: 50px;
width: 100%;
z-index: 100;
}
body, html
{
margin: 0;
padding: 0;
}
<div id="wrap">
<div id="menu">
</div>
</div>
这个没有错误,至少在我的浏览器中没有。
我发现您的代码存在以下问题:
- 你没有处理
window.scrollY
完全相等的情况
到 200。
- 您在 js 中设置
style.top
,而您可以在
css。
- 您正在使用
className +=
而不是 classList.add()
。
我解决了以上所有问题,并且有效,如下所示:
window.addEventListener("scroll", function() {
var nav = document.getElementsByTagName("nav")[0];
nav.classList.toggle("sticky", window.scrollY > 200);
});
body {
margin: 0;
}
nav {
width: 100%;
height: 200px;
background-color: #99FFFF;
}
nav.sticky {
position: fixed;
top: 0;
}
main {
background-color: #FF99FF;
height: 200vh;
}
<nav>This is the nav</nav>
<main>This is the content</main>
我正在做一个粘性导航,但是当我快速滚动时它不起作用..只有当我缓慢滚动时才会起作用但并不总是..
这是CSS:
div.sticky {
position: fixed;
}
和 Javascript:
window.addEventListener("scroll", function() {
var nav = document.getElementsByClassName("nav_lista")[0];
if(window.scrollY > 200) {
nav.className += " " + "sticky";
nav.style.top = 0;
} else if (window.scrollY < 200) {
nav.classList.remove("sticky");
nav.style.top = null;
}
});
知道错误在哪里吗?
谢谢!
我没有看到你的问题...
这是一个 fiddle 我认为代表你的问题:https://jsfiddle.net/5gua3nto/2/ 此处相同的代码段:
window.addEventListener("scroll", function() {
var nav = document.getElementById("menu");
if(window.scrollY > 500) {
nav.className += " " + "sticky";
nav.style.top = 0;
} else if (window.scrollY < 500) {
nav.classList.remove("sticky");
nav.style.top = null;
}
});
div.sticky {
position: fixed;
}
#wrap{
height: 8000px;
background-color: black;
}
#menu
{
background-color: red;
height: 50px;
width: 100%;
z-index: 100;
}
body, html
{
margin: 0;
padding: 0;
}
<div id="wrap">
<div id="menu">
</div>
</div>
这个没有错误,至少在我的浏览器中没有。
我发现您的代码存在以下问题:
- 你没有处理
window.scrollY
完全相等的情况 到 200。 - 您在 js 中设置
style.top
,而您可以在 css。 - 您正在使用
className +=
而不是classList.add()
。
我解决了以上所有问题,并且有效,如下所示:
window.addEventListener("scroll", function() {
var nav = document.getElementsByTagName("nav")[0];
nav.classList.toggle("sticky", window.scrollY > 200);
});
body {
margin: 0;
}
nav {
width: 100%;
height: 200px;
background-color: #99FFFF;
}
nav.sticky {
position: fixed;
top: 0;
}
main {
background-color: #FF99FF;
height: 200vh;
}
<nav>This is the nav</nav>
<main>This is the content</main>