移動端常見隨屏幕滑動頂部固定導航欄背景色透明度變化簡單jquery特效

項目需要，自己寫了一個jquery代碼，滿足目前移動端常見的效果，就是頂部導航欄隨屏幕滑動到指定位置，背景由透明變成不透明。該代碼在設置隨滾動條其他變化時，同樣有效，改變其css即可。一般為了過渡自然，我用了css3的過渡效果。這里我只把關鍵代碼給貼出來。

請轉載此文的朋友務必附帶原文鏈接，謝謝。

原文鏈接：http://xuyran.blog.51cto.com/11641754/1830134

jquery代碼如下：

$(document).ready(function(){
             $(window).scroll(function() {
                 var top = $(".fenlei").offset().top; //獲取指定位置
                 var scrollTop = $(window).scrollTop();  //獲取當前滑動位置
                 if(scrollTop > top){                 //滑動到該位置時執行代碼
                 	$(".mui-bar-nav").addClass("active");
                 }else{
                 	$(".mui-bar-nav").removeClass("active");
                 }
                 });
                });

css代碼如下：

.mui-bar-nav{box-shadow: none; background:rgba(0,0,0,.5)}
.mui-bar-nav.active{
	background:rgba(0,0,0,1);
	transition: background 1s;
         * Firefox 4 */
           -moz-transition:background 1s;
         /* Safari and Chrome */
         -webkit-transition:background 1s;
         /* Opera */
          -o-transition:background 1s;
           }

html代碼如下：

<header class="mui-bar mui-bar-nav">
	     <a class="mui-icon mui-icon-arrowdown mui-pull-left" href="choose-city.html">北京</a>
	     <div class="mui-input-row mui-search">
	         <input type="search" class="mui-input-clear" placeholder="商品或店鋪">
	     </div>
	 </header>

效果如下：