根據當前顯示的內容更改鏈接的目標

同樣，我對jQuery相當陌生，還有很多事情看起來很簡單，但讓我陷入了數小時的困境。根據當前顯示的內容更改鏈接的目標

現在，我試圖替換鏈接的目標。我知道該怎麼做。但事情是，目標必須根據當前顯示的div進行更改。

這裏的線框：

enter image description here

鏈路，當然，是上的箭頭，其固定在視口的底部。你現在可能已經猜到了，我希望鏈接指向＃div2，當訪問者在＃div1時，＃div3當他們在＃div2，等等......

我想到了一對夫婦的方法來做到這一點：

1）而不是鏈接到一個div，箭頭可能會觸發一個X像素滾動。由於所有的div都必須具有相同的高度，這將起作用。只有用戶可以隨時用鼠標滾動而不是點擊箭頭。如果他們這樣做，之後點擊箭頭可能會使他們陷入無處不在的境地。

2）我可以取代鏈接的目標取決於哪個div被徘徊。但是，這會引發另外兩個問題：移動設備上的鏈接根本不會被替換，並且只要光標懸停在箭頭本身上，它就不會被替換，因爲它是固定的並且高於其他所有內容。

因此，理想的解決方案實際上會根據所顯示的div的百分比來替換鏈接的目標：如果超過50％的＃div2正在顯示，則鏈接將具有＃div3的目標。

我認爲這將是一個完美的解決方案。但我絕對沒有線索如何做到這一點。 ^^

我將不勝感激任何幫助。 :-)

在此先感謝！

編輯：實際上，現在我想到了，如果超過50％的某個div顯示出來，解決方案不應該替換鏈接的目標。 div的高度爲1100px，因此如果屏幕定義低於該網站（這是大多數人）進入該網站，則會導致問題。因此，如果＃div2的可見高度大於＃div3的高度，腳本實際上應該用＃div3替換鏈接的目標。我不知道這是否使解決方案更容易。： -/

來源

2013-01-02 Tom S.

這是我會怎麼解決你的問題：

我你正在使用的位置猜測：相對的，在這種情況下，你可以簡單地將視內容的偏移量，再除以身高每個DIV的數量（因爲它們都是相同的）給你DIV的數量。使用這個數字來確定哪個孩子在視圖中（或者在視圖中），尊重包含它的鏈接的那個孩子的數據屬性。

讓我知道你是否需要我用代碼來說明。

希望這有助於。祝你好運。

來源

2013-01-02 17:22:58

我認爲這是你在找什麼：你的HTML應該是：

<div class="wrap" id="div1"></div> 
<div class="wrap" id="div2"></div> 
<div class="wrap" id="div3"></div> 
<div class="wrap" id="div4"></div>

所以只是額外的類。然後下載這個小圖書館http://www.appelsiini.net/projects/viewport，並使用它像這樣：

$(document).scroll(function(){ 
var a = "#" + $(".wrap:in-viewport").attr('id'); 
$('a#arrow').attr('href', a); 
})

隨着文檔滾動，它曾經DIV上來看，其ID添加到您的箭頭錨。

希望這是你想要的

來源

2013-01-02 19:13:13 aurel

根據當前顯示的內容更改鏈接的目標

回答

相關問題