我目前使用的菜单栏在 wordpress 中实现时并没有像它应该的那样缩小，但是当我只是在一个普通的 .html 文件中测试时它应该像它应该的那样缩小。
我已经尝试更改 javascript 值的值，但在 wordpress 中更改时似乎没有任何影响。
我希望在网站上向下滚动超过 80 像素时导航栏元素会缩小。但是当滚动超过 80px 时它会放大...
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("navbar").style.padding = "10px 10px";
document.getElementById("logo").style.fontSize = "25px";
} else {
document.getElementById("navbar").style.padding = "30px 10px";
document.getElementById("logo").style.fontSize = "35px";
}
}* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
overflow: hidden;
background-color: #f6f5f2 !important;
padding: 10px 10px;
transition: 0.3s;
position: fixed;
width: 100%;
top: 0;
z-index: 99;
}
#navbar {
box-shadow:1px 3px 1px #B6B6B6;
}
#navbar a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
#navbar #logo {
font-size: 45px;
font-weight: bold;
transition: 0.5s;
}
#navbar a:hover {
text-decoration: underline;
}
#navbar a.active {
color: #A9A9A9;
}
#navbar-right {
float: right;
padding-right: 80px;
}
@media screen and (max-width: 580px) {
#navbar {
padding: 20px 10px !important;
}
#navbar a {
float: none;
display: block;
text-align: left;
}
#navbar-right {
float: none;
}<!DOCTYPE html>
<body>
<div id="navbar"><a id="logo" href="http://enkien.dk">Koebenhavner</a>
<div id="navbar-right"><a class="active" href="http://enkien.dk">HOME</a>
<a href="http://enkien.dk/contact">CONTACT</a>
<a href="http://enkien.dk/about">ABOUT</a></div>
</div>
</body>
</html>最佳答案
我点击了您的 html 片段中的链接并检查了您的滚动功能。
尝试使用 window.scrollY 而不是 document.body.scrollTop。也许 Wordpress 正在正文中插入一些样式和/或 html 容器，这会干扰正文的大小和溢出行为。
function scrollFunction() {
if (window.scrollY > 80) { // <-- Updated this line
document.getElementById("navbar").style.padding = "10px 10px";
document.getElementById("logo").style.fontSize = "25px";
} else {
document.getElementById("navbar").style.padding = "30px 10px";
document.getElementById("logo").style.fontSize = "35px";
}
}希望这对您有所帮助。
关于javascript - 为什么我的菜单栏在缩小时不能在 wordpress 中正确缩小，因为它应该在普通的 html 文件中缩小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56073846/