iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 29
0
自我挑戰組

JavaScript基礎30天系列 第 29

JS AJAX基礎實作(4) DAY29

  • 分享至 

  • xImage
  •  

昨天我們已經將 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
若有任何問題 或是 內容有誤
煩請不吝嗇的告知一下/images/emoticon/emoticon07.gif


上一篇
JS AJAX基礎實作(3) DAY28
下一篇
總結 DAY30 耶 成功啦~~
系列文
JavaScript基礎30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言