Question

我试图在我的bootstrap导航栏上实现SlideDown / SlideUp类型效果。

我添加了一个标准的javascript函数，如下所示。但它似乎没有工作，并与页面滚动功能冲突。有可能解决这个问题吗？

window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementsByClassName("navbar").style.top = "0";
} else {
document.getElementsByClassName("navbar").style.top = "-50px";
}
}

Answer 1

替换
document.getElementsByClassName（＆＃34; navbar＆＃34;）by document.querySelector（。＆＃34; navbar＆＃34;）.......

所以你的代码应该是这样的：

window.onscroll = function() {scrollFunction()};
function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.querySelector(".navbar").style.top = "0";
} else {
document.querySelector(".navbar").style.top = "-50px";
  }
}

你不能输入getElementsbyClassName，因为你只有一个元素。所以最好为这类事做一个querySelector

Answer 2

window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementsByClassName("navbar")[0].style.top = "0";
} else {
document.getElementsByClassName("navbar")[0].style.top = "-50px";
}
}

document.getElementsByClassName返回此类的所有元素你需要在它之后添加[0]

JQuery / Javascript隐藏菜单SlideUp效果

2 个答案: