bootstrap固定导航在单页网站链接问题

Question

我有单页网站alampk.com
这里我在顶部修复了导航栏，但是当我点击SyntaxFactory之类的任何链接时，exp ...
它确实移动到那个部分，但顶部portfolio部分落后于navbar，我尝试了很多东西（css和jquery），但没有解决这个问题。

我尝试了以下jquery

50px

我还在导航栏之前创建了$(".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

但这只适用于最顶层的部分

Answer 1

如果没有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的解决方案，那么您需要在每个padding-top标记中添加section 50px，以便标题可见以你想要的方式。

Answer 2

实际上，我真的认为仅使用CSS即可轻松实现。 （感谢托马斯的提示！;-））。

如果包含＃号，则浏览器窗口将自身滚动到该位置，尝试达到使元素完全可见的最小位置。在导航栏固定的情况下，这是不希望的。

想法是仅使用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

再见！