---
tags: JavaScript
---

# JavaScript｜如何更動 Navigation 樣式當移動網頁滾軸時｜How to change your navigation style on scroll

大致步驟為：
1. 在你的 navigation 最外層放上標籤 `<header> </header>`
2. 撰寫 Javascript 設定在特定條件下，取用指定的 css
3. 撰寫 css
4. 完成

<header>

 /* 裡面放 Ｎavigation 的程式碼 */

</header>


<script>
    window.addEventListener('scroll', function () {
        const header = document.querySelector('header');
        const windowPosition = window.scrollY > 0;
        header.classList.toggle('scrolling-active', windowPosition);
    })
</script>

scrolling-active 是自己命名的 css class 名稱
在觸動網頁滾軸後會取用該 class

/* 更動 navigation 樣式 */

.scrolling-active .header_logo-title {
    visibility: hidden;
    position: absolute;
    z-index: -1;
    transition: 0.3s;
    transform-origin: center left;
    transform: scale(0.9);
    opacity: 0;
}

&nbsp;

---
參考資料：
* [Change Navigation Bar Styles After Scrolling With JavaScript | HTML and CSS Tutorial](https://www.youtube.com/watch?v=vE4UuSzR5T0)
---
其他比較複雜的參考資料：(可研究看看)
* [How to change your navigation style on scroll](https://www.youtube.com/watch?v=RxnV9Xcw914)
* [Changing nav-bar color after scrolling?｜stackoverflow](https://stackoverflow.com/questions/23706003/changing-nav-bar-color-after-scrolling)
---
###### tags: `JavaScript` `CSS` `scrolling`