昨天我們已經將 gotop按鈕實做出來
但有時候我們不想要它一直出現
而是使用者滾輪滑到下面
它才會顯示出來
但要怎麼做呢??
那就開始介紹啦~~
window.addEventListener("scroll", gotop);
我們可以在 window監聽滾輪事件
function gotop() {
if (window.scrollY >= 670) {
goTopBtn.style.width = "40px";
} else {
goTopBtn.style.width = "0";
}
}
gotop();
當使用者y軸 大於670px
則呈現gotop按鈕(寬度40px)
否則gotop按鈕消失(寬度0px)
是不是覺得視覺上更舒服呢
那我們的AJAX基礎實作就到此結束啦
附上完整的CodePen
CodePen:https://codepen.io/wemyferb/pen/yLJLpqP
若有任何問題 或是 內容有誤
煩請不吝嗇的告知一下
iThome鐵人賽
看影片追技術