移动端常见随屏幕滑动顶部固定导航栏背景色透明度变化简单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代码如下:
北京
效果如下:


网站栏目:移动端常见随屏幕滑动顶部固定导航栏背景色透明度变化简单jquery特效
网页网址:http://www.jxjierui.cn/article/psejse.html


咨询
建站咨询
