移动端常见随屏幕滑动顶部固定导航栏背景色透明度变化简单jquery特效
2016-07-26 15:08
1511 查看
项目需要,自己写了一个jquery代码,满足目前移动端常见的效果,就是顶部导航栏随屏幕滑动到指定位置,背景由透明变成不透明。该代码在设置随滚动条其他变化时,同样有效,改变其css即可。一般为了过渡自然,我用了css3的过渡效果。这里我只把关键代码给贴出来。
请转载此文的朋友务必附带原文链接,谢谢。原文链接:http://xuyran.blog.51cto.com/11641754/1830134jquery代码如下:
请转载此文的朋友务必附带原文链接,谢谢。原文链接:http://xuyran.blog.51cto.com/11641754/1830134jquery代码如下:
$(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>效果如下:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码