我如何动态调整 top: -50px; 以便它根据菜单是否打开而增加，以避免在用户导航到它时隐藏部分标题？
在我下面的示例中，我有一个固定的顶部导航栏，允许用户跳转到页面上的特定部分。 anchor 位置有 top: -50px; 来说明导航栏，因此当用户跳转到它时它不会覆盖部分标题。当显示足够小时，导航栏将其元素隐藏在一个菜单中，该菜单扩展到比导航栏更高的高度。单击菜单中的部分元素仍会跳转到该部分，但它也会覆盖部分标题。
非常感谢所有帮助，谢谢。
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8"/>
<title>title</title>
<style>
body {margin:0;}
.topnav {
overflow: hidden;
background-color: #000;
position: fixed;
top: 0;
width: 100%;
text-align: center;
z-index: 10;
}
.topnav a {
display: inline-block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: fixed;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.section {
position: relative;
}
.anchor {
display: block;
position: absolute;
width: 0;
height: 0;
z-index: -1;
top: -50px;
left: 0;
visibility: hidden;
}
</style>
<body>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div class="w3-row-padding" style="max-width: 50em;margin: auto; margin-top: 50px;">
<hr>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<div class="w3-full section">
<span id="home" class="anchor"></span>
<h1 style="margin-bottom:0px;"><a href="#home">Home</a></h1>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
</div>
<div class="w3-full section">
<span id="news" class="anchor"></span>
<h1><a href="#news">News</a></h1>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
</div>
<div class="w3-full section">
<span id="about" class="anchor"></span>
<h1><a href="#about">About</a></h1>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
</div>
<div class="w3-full section">
<span id="contact" class="anchor"></span>
<h1><a href="#contact">Contact</a></h1>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
<p> Here is a paragraph.</p>
</div>
</div>
</body>
</html>最佳答案
我不确定需要什么行为，但您可以将 onClick="myFunction()" 添加到 #myTopnav 的每个元素以在单击时将其关闭。
或者你可以像这样操作元素的样式:
var nodeList = document.getElementByClassName("anchor");
for(int i = 0; i < nodeList.length; i++) {
nodeList[i].style.top = "-150px";
}`
这在某些浏览器中可能不起作用!
或者使用 jQuery:
$(".anchor").each(function(i, el) {
el.style.top = "-150px";
});`
虽然我会推荐第一种解决方案，因为它感觉最优雅 - 至少在我的想象力范围内。
关于javascript - 根据菜单高度更改 anchor 位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49760332/