具有兩個固定導航的錨鏈接 - 複雜

基本上我有一個固定的頭部，其中有一個導航，它總是附着在窗口的頂部。然後我有另一個固定的元素，它是一個分頁，但它只有當它滾動時纔將它自己附着到窗口的頂部！具有兩個固定導航的錨鏈接 - 複雜

此分頁有錨鏈接，鏈接到頁面上的不同部分！但是，當您點擊鏈接時，它會覆蓋兩個固定浮動元素的內容。

這裏是例子：http://www.chudz.co.uk/test/

如果向下滾動，你會看到分頁自身附着到頁眉導航！然後，如果您在分頁中點擊「A」，您將看到會發生什麼！內容被覆蓋了！（A是唯一可以使用atm的鏈接）。

任何人都知道我可以使用的解決方案？

感謝

來源

2013-02-25 Chudz

下面是針對此問題的JavaScript解決方法。首先，在頭部鏈接中將name屬性更改爲id屬性。

<h2><a id="a">Authors - A</a></h2>

然後將此腳本添加到您的底部腳本中。

$(document).ready(function(){ 
    $("#pagination a").click(function(event){ 
     event.preventDefault(); 
     var o = $($(this).attr("href")).offset(); 
     var sT = o.top - 151; // 151 is the header height + navigation height 
     window.scrollTo(0,sT); 
    }); 
});

來源

2013-02-25 16:01:56 Derek

工作正常！唯一的問題是當分頁沒有設置爲固定之前滾動到如果有人點擊B內容仍然隱藏。任何想法如何解決這個問題？ – Chudz 2013-02-25 16:16:10

您會詳細說明並更新您的測試頁嗎？所以我會試一試。 – Derek 2013-02-25 16:24:48

對不起，德里克，它只是有時我做了破壞它的CSS我現在修復它的工作現場感謝！ – Chudz 2013-02-26 12:01:25

您的固定分頁不佔用DOM中的任何空間。

您應該使用的，而不是「名稱」「身份證」，然後添加一個類錨，它絕對位置和陰性切緣（同爲分頁的高度）向上移動。這將確保錨點在分頁下方開始。

來源

2013-02-25 15:43:09 Alex

爲什麼在使用CSS soloution時使用腳本來解決這個問題？只需添加一個類到你的主播風格：邊距：-151px – Alex 2013-02-25 16:27:07

具有兩個固定導航的錨鏈接 - 複雜

回答

相關問題