固定頂部導航元素和錨點

使用以下CSS，錨鏈接最終會被導航欄隱藏。固定頂部導航元素和錨點

你會提出什麼解決方案讓錨鏈接文本顯示在它下面？

/* style and size the navigation bar */ 
table.navigation#top 
{ 
    position: fixed; 
    margin-top: 0; 
    margin-bottom: 0; 
    top: 0; 
    left: 0; 
    z-index: 10; 
}

感謝

來源

2010-05-11 elmarco

把您的導航欄，有您的導航欄的高度匹配padding-top一個容器內。

你也應該可以position: relative你的鏈接給他們一個top匹配你的導航欄的高度。

來源

2010-05-11 19:12:52

謝謝，如果我不知道身高？ – elmarco 2010-05-11 21:42:21

我會使用JavaScript來獲取導航欄的高度，並將該值設置爲包含元素的「padding-top」。 – 2010-05-13 05:10:45

您可以position:fixed和top:0修復到位導航欄（如你已經做），並設置其height給定值，然後應用相同的值到每個目標錨的padding-top財產。

這樣，當點擊導航鏈接時，錨點元素的頂部將移動到瀏覽器視口的頂部，同時它們將部分被導航欄覆蓋（由於在導航欄中設置了z-index:1 ），這個覆蓋部分將是沒有任何內容的填充區域，並且通常是不可見的（除非添加邊框或背景顏色）。因此內容將正確地在導航欄後面開始。

這裏的示例代碼：

CSS：

#navbar 
{ 
    position: fixed; 
    top: 0; 
    z-index: 1; 
    height: 1em; 
    margin: 0; 
} 

.heading 
{ 
    padding-top: 1em; 
}

HTML：

<div id="content"> 
    <h2 id="one" class="heading">Section 1</h2> 
    ... 
    <h2 id="two" class="heading">Section 2</h2> 
    ... 
    <h2 id="three" class="heading">Section 3</h2> 
    ... 
</div> 
<div id="navbar"> 
    <a href="#one">Section 1</a> 
    <a href="#two">Section 2</a> 
    <a href="#three">Section 3</a> 
</div>

當然，這並沒有解決動態導航欄高度的問題，但Bryan建議使用JavaScript來實現這一點可能是最簡單的（唯一的方法）。

ps - 請記住，如果id'd元素有display:block或display:inline-block，則填充會影響頁面佈局，這可能不合意。

來源

2012-01-20 17:06:01 waldyrious

看看here，方法D解決了我的問題。該基本上是：

#method-D { 
    border-top:50px solid transparent; 
    margin-top:-50px; 
    -webkit-background-clip:padding-box; 
    -moz-background-clip:padding; 
    background-clip:padding-box; 
}

我正在使用一個動態的導航欄，只是當它將被隱藏固定到頂部。

來源

2013-01-21 18:52:27

固定頂部導航元素和錨點

回答

相關問題