項目需要,自己寫了一個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>
效果如下: