JDX01(2017):Travel World(2)

範例結果

 

二、【.gotop】視窗置頂

練習1:練練習1:【.gotop】視窗置頂

S1:結構加入

html結構

  <!-- 外掛 animate.css 運用 -->
  <link rel="stylesheet" href="css/animate.css">


  <!-- #右下角 置頂 gotop 加入 -->
  <div class="fa fa-plane gotop" aria-hidden="true"></div>
Pug 結構
  head
    // 外掛 animate.css 運用
    link(rel="stylesheet", href="./css/animate.css")  

  body
    // 右下角 置頂 gotop 加入
    .fa.fa-plane.gotop

 

S2:外掛 animate.css 運用【連結官網
/* #gotop 設定 == */
.gotop{
  font-size: 100px;
  color: #db2f7f;
  text-shadow:1px 1px #000;
  position: fixed;
  right: 30px;
  bottom: 30px;
  transform: rotate(-45deg);
  cursor: pointer;

  animation: tada 1s infinite;
}

S3:animate.css 調整

@keyframes tada {
  from {transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -45deg);}
  10%, 20% {transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -47deg);}
  30%, 50%, 70%, 90% {transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -47deg); }
  40%, 60%, 80% {transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -43deg);}
 to {transform: scale3d(1, 1, 1)  rotate3d(0, 0, 1, -45deg); }
}

 

S4.JS設定

//gotop 至頂
  $('.gotop').click(function(){
      $('html,body').animate({scrollTop:0},1000);
  });

練習2:【.gotop】頁面捲動超過 > 400時, .gotop 顯示

S1:【.gotop】,改為【bottom:-200px;】

S2:JS開始,頁面捲動超過 > 400時, .gotop 顯示

//程式思考邏輯
$(window).scroll(function(){
   if( 捲出的距離 > 欲顯示的高度 ){ 出現 #goTop }else{ 不出現#goTop }
});

 

$(window).scroll(function(){
	
  // .gotop 捲動第二頁自動顯示
    if($(window).scrollTop()> 400){
      $('.gotop').animate({bottom:10},500);
    }else{
      $('.gotop').animate({bottom:-200},500);
    }
		
});		//scroll End

S3:JS調整

*問題:上一步驟完成後,發現捲動時#goTop,顯示速度發現問題,因此【事件密集觸發】

//程式思考邏輯,利用
  setTimeout等300毫秒,才執行此FN
 
  var scrollTime = setTimeout( function ,3000);

 

//scroll事件
var $gotopTime;		//留意宣告變數位置

$(window).scroll(function(){
    // gotop 捲動第二頁自動顯示
      clearTimeout($gotopTime);
      $gotopTime = setTimeout(FngotopShow,300);		
});  //scroll End
 
function FngotopShow(){

  // gotop 捲動第二頁自動顯示
    if($(window).scrollTop()> 400){
      $('.gotop').animate({bottom:10},500);
    }else{
      $('.gotop').animate({bottom:-200},500);
    }
}