Team Treehouse導航欄動畫

Question

我想在滾動homepage時重現導航欄動畫的效果。我瞭解如何在使用Jquery滾動超過某個閾值時添加類。有任何想法嗎？如果我嘗試使用不透明度在菜單中爲鏈接添加動畫，則我的內容可能會重疊，如果我使用可見性，它會被取代。

謝謝。

Answer 1

使用此代碼。

的CSS

ul { 
    top: 0; 
    left: 0; 
    margin: 0; 
    width: 80%; 
    height: 60px; 
    position: fixed; 
    padding: 10px 10%; 
    background: #eeeeee; 
    z-index: 1000 ;/* Stay on other layers*/ 
} 
ul li{ 
    float: right; 
    margin: 20px 0 0 5px; 
    display: inline-block; 
} 
ul li a { 
    color: #333; 
    padding: 13px 20px; 
    border-radius: 5px; 
    text-decoration: none; 
    border: 2px solid transparent; 
    -webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    -ms-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 
} 
ul li:first-child a { 
    color: #5fcf80; 
    padding: 13px 5px; 
} 
.scroll li a { 
    opacity: 0; 
} 
.scroll li:first-child a { 
    opacity: 1; 
    padding: 13px 25px; 
    border-color: #68cf89; 
} 
.scroll:hover li a{ 
    opacity: 1; 
} 

的Html

<ul> 
    <li><a href="#"> Free trial </a></li> 
    <li><a href="#"> Sing in </a></li> 
    <li><a href="#"> Pricing </a></li> 
    <li><a href="#"> Stories </a></li> 
    <li><a href="#"> Features </a></li> 
</ul> 

Jquery的有問題，IE

var sn = 0; 
$(window).scroll(function() { 
    var st = $(this).scrollTop(); 

    if(st > 100){ 

     if(sn > st){ 

      $('ul').removeClass('scroll'); 

     }else{ 

      $('ul').addClass('scroll'); 

     } 

    } else{ 

     $('ul').removeClass('scroll'); 

    } 
    sn = st; 
}); 

jquery問題修復

var sn = 0; 
var x; 
$(window).scroll(function() { 
    var st = $(this).scrollTop(); 

    if(st > 100 && x != 0){ 

     if(sn > st){ 

      $('ul').removeClass('scroll'); 
      x=0; 

     }else{ 

      $('ul').addClass('scroll'); 
     } 

    }else if(st > 100 && x == 0){ 

     if(sn < st){ 

      $('ul').addClass('scroll'); 
      x=1; 

     }else{ 

      $('ul').removeClass('scroll'); 
     } 

    } 
    sn = st; 
});