引导固定链接导航问题

-3

我有单页网站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; 
}

但这仅适用于最顶端的部分工作

来源

2015-09-14 alamnaryab

请添加一些截图，并张贴导航栏代码。 – BryanH

我已经提到了url，它是静态html页面，请调试代码 – alamnaryab

你想实现什么没有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标签把一个padding-top 50像素的要解决的，所以标题是可见你想要的方式至。

来源

2015-09-16 15:41:46 Buzinas

很棒@Buzinas！你让我的日子 – alamnaryab

preventDefault技术工作 – alamnaryab

引导固定链接导航问题

回答

相关问题