在单页面站点链接问题中引导固定导航 [英] bootstrap fixed nav in single page site links issue

问题描述

我有单页网站 alampk.com

这里我在顶部固定了导航栏，但是当我点击任何链接时，如 exp ， 投资组合 ...

它确实转移到该部分，但顶部 50px 部分落后于navbar ，我尝试了很多东西（css和jquery），但没有解决这个问题。

I have single page site alampk.com
Here I have fixed navbar at top, but when I click any link like exp,portfolio...
it does move to that section but top 50px portion comes behind navbar, I tried many things (css and jquery) but nothing fixed this issue.

我尝试了以下jquery

I tried the following 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 作为

I also created a div before navbar as

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

但这只适用于最上面的部分

but this only work for top most section

推荐答案

如果没有Javascript，你在这里想要实现的目标是不可能的。

What you're trying to achieve here is impossible without Javascript.

你改变了 scrollTop 但是你需要在几毫秒之后才能让它工作，例如：

You've changed the scrollTop but you need to do it after some milliseconds to get it working, e.g:

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

如果您不想等待这些毫秒，您还可以阻止默认行为并对其进行模拟：

If you don't want to wait those milliseconds, you can also prevent the default behavior and simulate it:

$(".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 每个部分标签中的50px，因此标题将以您希望的方式显示。

Now, if you prefer a completely no-javascript solution, you'll need to workaround by putting a padding-top of 50px in each of your section tags, so the title will be visible in the way you want to.

这篇关于在单页面站点链接问题中引导固定导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！