JavaScript 螢幕高度觸發動畫 scrollTop

目的

網頁滑到中間,觸發動畫

解説

  • document.body.scrollTop:偵測現在在的位置離網頁頂端的距離
  • window.innerHeight:螢幕畫面高度
  • 把動畫的CSS寫成別的class,不要直接寫在元素上
  • 頂端距離條件完成後,加上動畫CSS,達成觸發動畫效果

範例

滑到第2頁觸發動畫

.page1
.page2
 #box
*
 box-sizing: border-box
 //border: 1px solid #000

html,body
 margin: 0
 padding: 0

.page1,.page2
 width: 100vw
 height: 100vh
 background: linear-gradient(#99E1D9 50%, #F0F7F4 50%)
 background-size: 2%
 text-align: center
 
#box
 width: 100px
 height: 100px
 background-color: darken(#99E1D9, 15%)
 border-radius: 100%
 margin-right: auto
 margin-left: auto
 position: relative
 opacity: 0
 top: 40vh
 animation-fill-mode: both
 
//動畫class分開寫
.fadeIn
 animation: fadeIn 3s
 
@keyframes fadeIn
 0%
  opacity: 0
 100%
  opacity: 1
//不能用document.body.addEventListener
//因為不是拖動body
//而是拖動整個頁面document
document.addEventListener("scroll",

  function(){

   if(document.body.scrollTop>window.innerHeight*0.5){
    //class添加不能使用className+=
    //要用效能更高的classList.add()
    document.querySelector("#box").classList.add("fadeIn");
   }  
  }
 );

Display

補充:scrollBottom方法

沒有 scrollBottom ,但是可以自己算

//body長度 - scrollTop
//現在位置離底部距離
document.body.offsetHeight-document.body.scrollTop

更新:document.body.scrollTop永遠是0

某些webkit結構的瀏覽器的scrollTop不是在document.body裡面,而是在document.documentElement裡面。

【解決方法】

document.body.scrollTop→替換成:document.documentElement.scrollTop

Leave a Reply

Your email address will not be published. Required fields are marked *