自舉導航欄背後的空間

使用自舉的navbar，我想弄清楚如何讓它不隱藏正文部分的頂部。自舉導航欄背後的空間

其實，這是很好的使用建議在這裏什麼解決：

Twitter Bootstrap - top nav bar blocking top content of the page

但是，仍然有不工作的東西：當你有一個像這樣的鏈接：

<li><a href="#section1">Go to Section 1</a></li> 
<li><a href="#section2">Go to Section 2</a></li> 
<li><a href="#section3">Go to Section 3</a></li> 
<li><a href="#section4">Go to Section 4</a></li>

和

<h4 id="Section 1">Section 1</h4> 
<p>Content of Section 1</p> 
<p><a href="#">Back to Top</a></p> 

<h4 id="Section 2">Section 2</h4> 
<p>Content of Section 2</p> 
<p><a href="#">Back to Top</a></p> 

<h4 id="Section 3">Section 3</h4> 
<p>Content of Section 3</p> 
<p><a href="#">Back to Top</a></p> 

<h4 id="Section 4">Section 4</h4> 
<p>Content of Section 4</p> 
<p><a href="#">Back to Top</a></p>

在這種情況下，當您單擊時，例如第2節直接鏈接（或快捷方式），頁面正確地向下滾動直到第2節，但它將其開頭隱藏在引導導航欄的後面。

任何有關如何解決這個問題的線索？

來源

2012-10-06 ElPiter

通過將：target psuedo-selector添加到鏈接的CSS，您可以將定義的填充應用於所選鏈接（只要它在瀏覽器中顯示爲：www.example.com＃link1）即可。

我花了近2小時試圖在網上搜索試圖找到的Jquery或JS應用填充到目標股利和修改後，我的谷歌search terms found this

可能有愚弄與舊的瀏覽器證明這樣的方式，但暫時，這讓我成爲一個快樂的露營者。

來源

2012-11-30 04:28:04 munt

我使用這個'：target'技術，雖然我只是想說當我訪問時它會自動推動我的內容（通過填充量）任何錨點。當我點擊同一文檔中的不同錨點時，空間會被恢復。有沒有其他人注意到這一點，你是否知道任何解決方法？ – user664833

在你的<h4>上放一些頂部填充物，以解釋你的navbar的高度。即把這個在你的CSS：

h4 { 
    padding-top: 30px; 
}

當然，改變30px你實際navbar高度。

來源

2012-10-06 20:58:31 betomontejo

這是一個解決方案，現在是所有我擁有的，所以可能我會離開它，因爲你說過。但顯然這使得我的頁面在每個部分之間都有巨大的醜陋空間。 – ElPiter

嗨，試試把

MrWater

我有同樣的問題，還沒有找到一個真正的解決方案，但只是更多的解決方法（如「填充頂」的解決方案本身，這似乎對我非常hackish）。看起來topbar問題仍然沒有解決，人們只是以某種方式繞過它。

一種非侵入性的變通爲我的作品（好，因爲它可以）是下面的JavaScript（從「填充頂」黑客分開）添加到頁面：

var shiftWindow = function() { scrollBy(0, -50) }; 
if (location.hash) shiftWindow(); 
window.addEventListener("hashchange", shiftWindow);

我發現這在comment to a bootstrap GitHub issue。但是，該功能並不是在所有必要的場合下執行的（例如，當再次進入相同的錨點時）。

a.anchor{display: block; position: relative; top: -250px; visibility: hidden;}

然而，這是更具侵入性的，因爲你必須給你的錨類（區別開來：

更可靠的解決辦法是使用CSS相對定位（在this StackOverflow answer發現移動錨位置所以你必須更新所有的錨定HTML代碼（這可能並不總是可能的，例如當你在處理一個剛性的CMS來生成你的錨點時）：

<a class="anchor" id="top"></a>

來源

2015-06-05 07:18:58 mastov

自舉導航欄背後的空間

回答

相關問題