移動(dòng)端常見(jiàn)隨屏幕滑動(dòng)頂部固定導(dǎo)航欄背景色透明度變化簡(jiǎn)單jquery特效

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

請(qǐng)轉(zhuǎn)載此文的朋友務(wù)必附帶原文鏈接，謝謝。

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

jquery代碼如下：

$(document).ready(function(){
             $(window).scroll(function() {
                 var top = $(".fenlei").offset().top; //獲取指定位置
                 var scrollTop = $(window).scrollTop();  //獲取當(dāng)前滑動(dòng)位置
                 if(scrollTop > top){                 //滑動(dòng)到該位置時(shí)執(zhí)行代碼
                 	$(".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>

效果如下：