bootstrap 修复了单页站点链接中的导航问题答案

【问题标题】：bootstrap fixed nav in single page site links issuebootstrap 修复了单页站点链接中的导航问题
【发布时间】：2015-12-10 22:11:34
【问题描述】：

我有单页网站alampk.com
在这里，我在顶部固定了导航栏，但是当我单击任何链接时，例如 exp,portfolio...
它确实移至该部分，但顶部 50px 部分位于导航栏后面，我尝试了很多东西（css 和 jquery），但没有解决这个问题。

我尝试了以下jquery

$(".nav a").click(function(){
   $(window).scrollTop($(window).scrollTop()-50);
});
//but this executes before reaching to target section of page 
//and also I not sure -50 will be accurate value for required positioning

我还在导航栏之前创建了一个div

<div id="navPlaceHolder"></div>
//css
#navPlaceHolder{
    height:50px;
    visibility:hidden;
}

但这仅适用于最顶部的部分

【问题讨论】：

请添加一些截图，并发布导航栏代码。
我提到了url，是静态html页面，请调试代码

标签： jquery html css twitter-bootstrap-3

【解决方案1】：

事实上，我真的认为仅使用 CSS 就很容易。（感谢 Thomas 的提示！;-)）。

如果您包含一个井号 #，浏览器窗口将自行滚动到该位置，试图达到最小可能位置以使元素完全可见。在固定导航栏的情况下，这是不希望的。

这个想法是在你想要指向的每个链接元素之前创建一个空元素，只需使用 CSS：

     element-you-want-to-target::before {
       display: block;
       content: " ";
       margin-top: -150px; /* the height of your navbar that will put the empty element up*/
       height: 150px; /* the height of the empty element that goes behind your navbar
       visibility: hidden; /* just in case */
       pointer-events: none;
     }

如果在使用此方法之前尝试在正文或要定位的元素上放置一些边距，则必须小心，因为在响应式环境中，将无法正常工作，显示空白。

这是一支笔来展示我的所作所为。希望有用 --> https://codepen.io/Mau-Di-Bert/pen/mjQwXw

再见！ ?

【讨论】：

【解决方案2】：

如果没有 Javascript，您在这里尝试实现的目标是不可能的。

您已经更改了 scrollTop，但您需要在几毫秒后执行它才能使其正常工作，例如：

$(".nav a").click(function(){
  setTimeout(function() {
    $(window).scrollTop($(window).scrollTop() - 50);
  }, 10);
});

如果你不想等待那几毫秒，你也可以阻止默认行为并模拟它：

$(".nav a").click(function(e){
  e.preventDefault();
  var href = e.target.href, id = "#" + href.substring(href.indexOf("#") + 1);
  $(window).scrollTop($(id).offset().top - 50);
});

现在，如果您更喜欢完全无 JavaScript 的解决方案，您需要通过在每个 section 标签中放置一个 50px 的 padding-top 来解决问题，这样标题将以您想要的方式显示.

【讨论】：

伟大的@Buzinas！你让我开心