Question

如何动态调整top: -50px;以使其根据菜单是否打开而增加，以避免在用户导航时隐藏部分标题？

在下面的示例中，我有一个固定的顶部导航栏，允许用户跳转到页面上的特定部分。锚点位置有top: -50px;来计算导航栏，因此当用户跳转到它时它不会覆盖部分标题。当显示足够小时，导航栏会将其项目隐藏在菜单中，该菜单会扩展到比导航栏更高的高度。单击菜单中的节项仍将跳转到该节，但它也将覆盖节标题。

非常感谢所有帮助，谢谢。

＆＃13;

<!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()">&#9776;</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>

＆＃13;

Answer 1

我不确定需要什么行为，但您可以在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";
});`

虽然我会推荐第一个解决方案，因为它感觉最优雅 - 至少就我的想象力而言。

根据菜单高度更改锚点位置

1 个答案: