# [JS30] Day.13 Slide In on Scroll
###### tags: `JS30`
## 任務 Task
當滑到圖片位置的一半時，則顯現出圖片，離開圖片的一半時，則移開圖片。

==完成時間：30min==
## 步驟 Step
1. 監聽 `window` 的 `scroll` 事件。
2. `forEach` 每張圖片，用 `offsetTop` 計算每張圖片離視窗的位置。
3. 當圖片位置在滑動視窗的位置時，新增 `active` 的 `class`。
## 筆記 Note
### <font color=#337EA9>JS window scroll event</font>
* 偵測滾輪的滾動，因為計算次數頻繁，所以通常會搭配 `setTimeout()`、`requestAnimationFrame()`來限制次數。

function debounce(func,wait = 20,immediate = true){
    var timeout;
    return function(){
        var context = this,args = arguments;
        var later = function () {
            timeout = null;
            if(!immediate)func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}

### <font color=#337EA9>window.innerHeight</font>
* 為視窗內高度。
* `outerHeight` 為瀏覽器高度。
### <font color=#337EA9>offsetTop</font>
* 為元素到視窗頂的高度。

## 想法 Idea
:::warning
:bulb: <font color=black>可以使用 `Intersection Observer`
</font>
:::

參考：[超好用的 Web API - Intersection Observer](https://jim1105.coderbridge.io/2022/07/30/intersection-observer/)

## 連結
[MDN](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)