2022-03-02|閱讀時間 ‧ 約 2 分鐘

自學網頁前端

教到了JS event，非常實用的一堂課程，開始進入監聽階段，可以跟使用者互動，也慢慢建立UX的概念，讓我可以開始自行設計動態網頁，並且優化了第二個靜態網頁，加入了滾動變化的效果。

let header = document.querySelector("header");

let headerAnchor = document.querySelectorAll("header nav ul li a")

window.addEventListener("scroll",() => {

if (window.pageYOffset != 0){

header.style.backgroundColor ="rgba(72,60,139,0.3";

header.style.color = "white";

headerAnchor.forEach(a => {

a.style.color = "white";

})

} else{

header.style.backgroundColor = "";

header.style.color = "";

headerAnchor.forEach(a => {

a.style.color = "#381b11";

})

})

分享至

成為作者繼續創作的動力吧！

從 Google News 追蹤更多 vocus 的最新精選內容

作者的相關文章

成為會員後即可發表留言