粘滞导航偏移以防止内容重叠

Question

目前在我的单页网站上，当您单击Bootstrap导航栏菜单项时，它会将您带到具有该div #ID的页面部分。但是，当然因为导航栏的顶部与新部分的顶部对齐，我的内容与导航栏的宽度重叠（折叠时为80px或50px）。

问题的屏幕截图：

＆＃34;准备预订＆＃34;标题实际上位于该div的中间，但与80px的导航栏重叠。

屏幕截图显示页面顶部：

问题我不希望导航栏与我链接的部分中的内容重叠。换句话说，我希望导航栏底部的顶部与新部分div的顶部对齐。

当然可以使用一些JS来处理导航栏向上偏移导航栏的高度吗？

我有一个建议是使用CSS在页面顶部添加填充，但这通常会滚动页面时添加额外的80px填充，这是我不想要的。

Answer 1

好的，所以我最终使用JS和CSS找到了两个解决方案 here

我更喜欢这个CSS解决方案：

#id:before { 
  display: block; 
  content: " "; 
  margin-top: -80px; 
  height: 80px; 
  visibility: hidden; 
}

显然，将ID替换为锚的ID。

实际的JS代码段解决方案：

var shiftWindow = function() { scrollBy(0, -50) };
window.addEventListener("hashchange", shiftWindow);
function load() { if (window.location.hash) shiftWindow(); }

但是，它仍然有点笨拙，因为您实际上可以看到浏览器滚动到锚点，然后通过scrollBy偏移量80px备份。

Answer 2

我不确定此问题是否已解决，但我遇到了同样的问题并添加了适当的标题（通过适当的填充，我的意思是导航栏元素的高度）。

例如：

#id { padding:50px }