jQuery scroll 重複觸發的問題

菜鳥前端卷軸 scroll

banwan 2020-01-17 15:41:45 ‧ 1744 瀏覽

分享至

各位前輩好

菜鳥第一次發問問題，有任何不當的地方還請給指教?

想模仿出這個網頁在滾動卷軸，股票資訊欄位小於瀏覽器頂部時，會以出現 slidedown 的效果出現

在此先附上我的CodePen

需求描述

滾過我的欄位離開畫面後 fixed 在頂部，並以 slidedown 的效果出現

問題說明

第一次可以順利觸發，但後續重新觸發都沒有辦法以 slidedown 的效果出現

有查看一下，雖然 else 的函式有觸發
並有移除 .fixed--top
但好像看 F12 重複移除寫上 top: 146px
影片說明

有爬文看可能是反覆觸發所造成的問題

在其他發問中有看到前輩說
「不利用scroll來觸動動作，而是啟動動作。
而是將scroll來記錄對應值及啟動對應。
並且會給與一個動作開關。」

想請問各位前輩該怎麼做呢?
因為我只會最基本的 jQuery 操作，所以還想請問這樣寫的問題是什麼呢？?

先非常感謝各位前輩閱讀完問題

ShawnL iT邦新手 1 級 ‧ 2020-01-17 17:59:03 檢舉

概念很簡單，用人類的理解抽象便是=>
有一個容器，紀錄滾動時的卷軸位置
另外有一個判斷，
當這個卷軸位置高過某一個數值時，就幫某個元素加上 class
當這個卷軸位置低過某一個數值時，就幫某個元素去除 class

接著你只要針對 class style 上去做起始的位置變化即可！

要怎麼用 jQuery 實作就是再去翻翻 API，這樣會更有記憶點。