2012-09-28 35 views
3

我有一個粘性標題,它的下方有一個陰影框。我希望只有當用戶向下滾動時纔會顯示框陰影。一旦用戶滾動回頁面頂部,陰影也應該消失。粘滯標題的框陰影應該只在滾動時激活

同樣的問題已經在這裏問: Fixed header with shadow image on scroll with scrollable content area

誰管理,以解決這個問題有它實現這裏的傢伙: http://www.provisiontree.co.in/

我看到了答案用的jsfiddle的例子,但沒有人知道如何在示例網站中有效的淡入淡出效果會出現嗎?

我之所以再問這個問題的原因是因爲這個人沒有解釋他是如何設法做到這一點的,我無法弄清楚該怎麼做。

謝謝。 :)

回答

3

您需要捕捉窗口的「滾動」事件。 您可以在此檢查小提琴,它使用jQuery的:http://jsfiddle.net/DQv33/

窗口的scrollTop的屬性會告訴你,如果你是在頂部($(窗口).scrollTop()== 0)或沒有,所以這是設置/取消設置標題盒子陰影的條件。

+0

謝謝馬克。這工作。但是我花了很長時間纔開始工作,因爲我是從jsFiddle複製你的代碼,並且它似乎在腳本的末尾添加了一個額外的字符,這引發了錯誤。它的一個已知的問題,並在這裏討論:http://stackoverflow.com/questions/5733275/chrome-uncaught-syntax-error-unexpected-token-illegal :) – NJT