引導固定鏈接導航問題

Question

我有單頁網站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; 
} 

但這僅適用於最頂端的部分工作

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的解決方案，你需要在每個section標籤把一個padding-top 50像素的要解決的，所以標題是可見你想要的方式至。