javascript - 位置问题：固定和哈希标签（正文中的详细信息）

Question

我有一个position:fixed;导航栏。每当我转到 mypage.html#myid 时，导航栏都会与 .html 的一些内容重叠myid。如何将整个页面向下移动一点，以便导航栏不覆盖内容？

PS我试过body{padding-top:50px;}

Answer 1

您不能在 myid div 上使用 margin-top 吗？你的主要内容应该在一个 div 里面，这个 div 应该在 body 里面，然后 myid div 可以从 body 下推，为固定导航栏留出足够的空间。

一些代码会有所帮助...

Answer 2

需要一些 hacky 解决方案。

#myID:before { 
  display: block; 
  content: " "; 
  margin-top: -285px; /* navigation height */
  height: 285px; /* navigation height */
  visibility: hidden; 
}

逻辑是在#myID 内容之前添加隐藏元素，以便浏览器为其提供隐藏空间。将负值作为 margin-top 将阻止它提供物理空间。

请在这里查看详细信息：http ://css-tricks.com/hash-tag-links-padding/