移动端常见随屏幕滑动顶部固定导航栏背景色透明度变化简单jquery特效
项目需要，自己写了一个jquery代码，满足目前移动端常见的效果，就是顶部导航栏随屏幕滑动到指定位置，背景由透明变成不透明。该代码在设置随滚动条其他变化时，同样有效，改变其css即可。一般为了过渡自然，我用了css3的过渡效果。这里我只把关键代码给贴出来。
请转载此文的朋友务必附带原文链接，谢谢。
原文链接：http://xuyran.blog.51cto.com/11641754/1830134
jquery代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
|
$(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代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
|
.mui-bar-nav{box-shadow:
none
;
background
:rgba(
0
,
0
,
0
,.
5
)}
.mui-bar-nav.active{
background
:rgba(
0
,
0
,
0
,
1
);
transition: background
1
s;
* Firefox
4
*/
-moz-transition:background
1
s;
/* Safari and Chrome */
-webkit-transition:background
1
s;
/* Opera */
-o-transition:background
1
s;
}
|
html代码如下：
|
1
2
3
4
5
6
|
<
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
>
|
效果如下：
本文转自 小旭依然 51CTO博客，原文链接:http://blog.51cto.com/xuyran/1830134