當用戶達到div＃時，淡入圖像ID +再次出現n個像素後淡出

我目前正在爲網站製作單頁佈局。頁面的每一部分都有相應的'主題'標識，我希望jQuery在用戶到達該位置時將其淡入。當進一步移動一定數量的像素時（例如向上或向下移動100像素），圖像應該再次淡出。是否有捷徑可尋？每個div的高度是不固定的（CMS在它後面），所以我不能只從頂部或某個東西開始固定px數量。當然，如果你進一步向下/向上移動到其他任何div，圖像應該首先消失。當用戶達到div＃時，淡入圖像ID +再次出現n個像素後淡出

這裏是我的示例代碼

<div role="main"> 
    <div id="first"><img … />content…</div> 
    <div id="second"><img … />content…</div> 
    <div id="third"><img … />content…</div> 
</div>

來源

2012-02-07 physalis

如果我理解正確的話，這裏有一個快速演示你正在尋找：

http://jsfiddle.net/G979Q/

無圖像有，只是但如果這就是你想要的，你應該可以很容易地擴展。根據CMS如何放置元素的其他限制，您可能會遇到問題，但總體思路應該適用。

編輯：只是爲了確保該意見在回答捕獲，基於滾動，而不是基於鼠標的衰落，這裏有一個快速演示：

http://jsfiddle.net/CPrcP/3/

積分：

希望這有助於。

來源

2012-02-07 04:11:48

嘿icyrock，感謝您的快速回復。然而，我可能不太清楚我想要什麼。關於鼠標而不是頁面位置 - 當用戶向下滾動到具有特定ID的元素時，其內容或元素應該淡入。只要他像100px一樣向上/向下滾動，元素應該再次淡出。類似的東西。你的例子（非常感謝你:)），而是處理鼠標定位。 – physalis 2012-02-07 08:35:32

不想打擾任何人，但任何人有想法？我在這裏看到了我需要的部分，但無法連接/不知道是否有可能......謝謝;）。 – physalis 2012-02-08 10:25:27

如果我的理解正確，這是你想到的：http://jsfiddle.net/CPrcP/？ – 2012-02-09 00:33:35

當用戶達到div＃時，淡入圖像ID +再次出現n個像素後淡出

回答

相關問題