JS30紀錄 13-Slide in on Scroll

目標

隨著卷軸移動到中央，讓圖片動態顯示。

Demo | Github

處理步驟

步驟 1.

首先取得所有圖片 HTML ，並建立空的 Function checkSlide 與綁定 scroll 捲軸移動事件。

步驟 2.

• 因為 scroll 每次觸發頻率過高，所以呼叫 debounce 來降低呼叫頻率，避免效能損耗
• 針對所有圖片 HTML 進行 foreach 迴圈
• 取得目前畫面所在的高度
• 取得圖片所在的高度

步驟 3.

依照上一步驟取得的高度位置，進行判斷，然後添加 active class

筆記與備註事項

此練習有幾個要熟悉的要點：

• 熟悉畫面的位置，包含相對位置與絕對座標
• 另一是 debounce 這 Function 利用了 setTimeout 與 apply

JavaScript 部分

window.clearTimeout

清除 setTimeout 設定。

Function.prototype.apply()

apply() 方法會呼叫一個以 this 的代表值和一個陣列形式的值組(或是一個 array-like object )為參數的函式。
資料來源 - MDN

CSS 部分

參考資料

• JavaScript 30 day
• 作者 Github Wes Bos
• Js 30 day 中文指南
• 瓜瓜的 JS 30
• 我的 JS 30 練習Github