加拿大28

  • <tr id='vqh8w'><strong id='vqh8w'></strong><small id='vqh8w'></small><button id='vqh8w'></button><li id='vqh8w'><noscript id='vqh8w'><big id='vqh8w'></big><dt id='vqh8w'></dt></noscript></li></tr><ol id='vqh8w'><option id='vqh8w'><table id='vqh8w'><blockquote id='vqh8w'><tbody id='vqh8w'></tbody></blockquote></table></option></ol><u id='vqh8w'></u><kbd id='vqh8w'><kbd id='vqh8w'></kbd></kbd>

    <code id='vqh8w'><strong id='vqh8w'></strong></code>

    <fieldset id='vqh8w'></fieldset>
          <span id='vqh8w'></span>

              <ins id='vqh8w'></ins>
              <acronym id='vqh8w'><em id='vqh8w'></em><td id='vqh8w'><div id='vqh8w'></div></td></acronym><address id='vqh8w'><big id='vqh8w'><big id='vqh8w'></big><legend id='vqh8w'></legend></big></address>

              <i id='vqh8w'><div id='vqh8w'><ins id='vqh8w'></ins></div></i>
              <i id='vqh8w'></i>
            1. <dl id='vqh8w'></dl>
              1. 您好,欢迎来到[码蚁之家]阅读室  笑话大全  编程问答  问答大全  移民之家  娱乐之家  范文之家  源码下载  电子书籍  软件下载  专题
                ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
                当前位置:首页 >> 网页制作 >> web前端 >> 移动端常见随屏幕滑动顶部固定导航栏背景色透明度变化简单jquery特效

                移动端常见随屏幕滑动顶部固定导航栏背景色透明度变化简单jquery特效

                来源:网络整理     时间:2016-07-26     关键词:

                本篇文章主要介绍了" 移动端常见随屏幕滑动顶部固定导航栏背景色透明度变化简单jquery特效",主要涉及到方面的内容,对于web前端感兴趣的同学可以参考一下: 项目需要,自己写了一个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代码如下:

                <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>

                效果如下:

                     		    移动端常见随屏幕滑动顶部固定导航栏背景色透明度变化简单jquery特效

                     		    移动端常见随屏幕滑动顶部固定导航栏背景色透明度变化简单jquery特效

                以上就介绍了 移动端常见随屏幕滑动顶部固定导航栏背景色透明度变化简单jquery特效,包括了方面的内容,希望对web前端有兴趣的朋友有所帮助。

                本文网址链接:http://bayitaku.com/article/detail_2951192.html

                上一篇 tomcat 7配置ssl教程 下一篇 find 总结

                相关图片

                相关文章