JDX01(2017):Travel World(2)

範例結果

六、nav 點選時,緩慢捲動至各頁動畫效果

練習1: nav click移動至各頁

方法1:利用取得按鈕的連結位置

//nav click移動至各頁
  $('nav a').click(function(e){
      e.preventDefault();
      var $target = $(this).attr('href');               //取得nav a的連結href位置
      var $targetPos = $($target).offset().top - 50;    //取得其目的位置

      //方法1:利用取得按鈕的連結位置
        $('html, body').animate({scrollTop: $targetPos}, 1000);

    });  //$('nav a').click end

 

//nav click移動至各頁
  $('nav a').click(function(e){
      e.preventDefault();
      var $target = $(this).attr('href');               
      var $targetPos = $($target).offset().top - 50;    
      var $navIndex = $(this).index();                  //取得其索引值,方法2 新增
      console.log($navIndex);

      //方法1:利用取得按鈕的連結位置
        //$('html, body').animate({scrollTop: $targetPos}, 1000);

      //方法2:利用nav 按鈕的個數與 section 個數相同 連結位置
        var $sectionTop = $('#main section').eq($navIndex).offset().top -50;
        $('html,body').animate({scrollTop:$sectionTop},1000);

    });  //$('nav a').click end

 

練習2:捲動至該頁時,nav按鈕加化

S1:JS 設定

//視窗捲動
$(window).scroll(function(){
  var scrollPos = $(window).scrollTop();
  var windowHeight = $(window).height();
 
  //nav 移動至各頁
  $('section').each(function(i) {
        // console.log($(this).offset().top);
        $sectionNo = i;
        
        if($(this).offset().top <= $(window).scrollTop() +200 ){
            $('nav a').removeClass('active');
            $navBtnBg = $('nav a').eq($sectionNo).addClass('active');	
        }else{
          $navBtnBg = $('nav a').eq($sectionNo).removeClass('active');	
        } //if End
      });//each End

});     //$(window).scroll end

S2:CSS美化

/* nav click移動至各頁後 出現向下箭號 */

nav .active{
  border-bottom: 5px solid #FF549E;
}
nav .active:after{
  opacity: 1;
}

SCSS美化,加入【class=”active”】

nav{
  // nav click移動至各頁後 出現向下箭號 
  .active{
    border-bottom: 5px solid #FF549E;
    &:after{
      opacity: 1;
    }
  }
} //nav end