移动端页面滑动,菜单到顶部之后定位在顶部(position: sticky;)
2017-03-30 21:35
676 查看
在移动端的页面中,我们会遇到有一部分是一直显示的,比如说菜单项,当页面初始化的时候,它处在文档流内,当页面下滑的时候,并且菜单到达顶部之后就会一直定位在顶部,并且上滑的时候,菜单又会回到文档流。
到这里大家应该会有点思路,定位在顶部不动了,那就肯定用了position: fixed;,再实现可以回到文档流,那这一块就最好使用定位布局,方便控制。下面是我根据这个来写的一个:
此处绿色的div块就代表上面所说的菜单,实现方式就是初始化布局使用绝对定位,这样top、left属性就设置了,并且要保证position: fixed;的时候top、left依然适用,给全局对象window绑定事件scroll、touchmove,之所以也需要touchmove事件是为了让运行起来更加流畅,不会有突兀变化的感觉。
上面的在安卓下面测试相当棒,但是在苹果下面总是在移动结束之后会有一个明显的变化,看起来很不舒服,可以扫面下面二维码的进行查看:
经过查看之后,好像是苹果不支持touchmove事件,只会在滑动结束的时候才会进行判断,这就比较尴尬了。。。。。。
但是经过查找资料,发现了position: sticky;,这个是苹果自己出的,并且已经交由w3c审核了,现在进苹果支持这个属性,其他的安卓端的浏览器暂时不支持(PC端谷歌浏览器已经支持)。
position: sticky;的支持性如下:
那position: sticky;是用来干嘛的呢,简单的说它类似于position: relative;和position: fixed;的合体,当目标区域在屏幕中可见时,它的行为就像position: relative;, 而当页面滚动时,目标区域要超出屏幕的时候,它的表现就像position: fixed;。多么神奇的一个功能。
那这样的话,我们就可以在安卓浏览器的时候调用上面的js方法,在苹果浏览器中的时候调用position: sticky;的属性,这样的话就牵扯到判断浏览器是安卓还是苹果的:
这样的话就有如下的代码了:
这样的话在安卓和苹果下都完美的兼容了,依然给个二维码,大家体验一下吧。
到这里大家应该会有点思路,定位在顶部不动了,那就肯定用了position: fixed;,再实现可以回到文档流,那这一块就最好使用定位布局,方便控制。下面是我根据这个来写的一个:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <title>移动端页面滑动,菜单到顶部之后定位在顶部</title> <style> * {margin: 0;padding: 0;} .header {width: 100%;height: 100px;background: red;} .container {width: 100%;height: 1000px;background: #ccc;} .liveDiv {top: 0;width: 100%;height: 50px;background: green;} .scale {transform: scale(0.5);transform-origin: 0% 0%;} </style> <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.js"></script> </head> <body> <div class="header"></div> <div class="container"> <div class="liveDiv"></div> </div> <script> /* * 菜单移动到顶部后定位在顶部 * message[菜单的id名或者class类名] * height[菜单距离顶部的距离] */ function navChangeArea(message, height) { var liveDiv = $("#" + message).length ? $("#" + message) : $("." + message); var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (scrollTop < height) { liveDiv.css("position", "relative"); } else { liveDiv.css("position", "fixed"); } } $(window).bind("scroll", function() { navChangeArea("liveDiv", 100); }); $(window).bind("touchmove", function() { navChangeArea("liveDiv", 100); }); </script> </body> </html>
此处绿色的div块就代表上面所说的菜单,实现方式就是初始化布局使用绝对定位,这样top、left属性就设置了,并且要保证position: fixed;的时候top、left依然适用,给全局对象window绑定事件scroll、touchmove,之所以也需要touchmove事件是为了让运行起来更加流畅,不会有突兀变化的感觉。
上面的在安卓下面测试相当棒,但是在苹果下面总是在移动结束之后会有一个明显的变化,看起来很不舒服,可以扫面下面二维码的进行查看:
经过查看之后,好像是苹果不支持touchmove事件,只会在滑动结束的时候才会进行判断,这就比较尴尬了。。。。。。
但是经过查找资料,发现了position: sticky;,这个是苹果自己出的,并且已经交由w3c审核了,现在进苹果支持这个属性,其他的安卓端的浏览器暂时不支持(PC端谷歌浏览器已经支持)。
position: sticky;的支持性如下:
那position: sticky;是用来干嘛的呢,简单的说它类似于position: relative;和position: fixed;的合体,当目标区域在屏幕中可见时,它的行为就像position: relative;, 而当页面滚动时,目标区域要超出屏幕的时候,它的表现就像position: fixed;。多么神奇的一个功能。
那这样的话,我们就可以在安卓浏览器的时候调用上面的js方法,在苹果浏览器中的时候调用position: sticky;的属性,这样的话就牵扯到判断浏览器是安卓还是苹果的:
if(/android/i.test(navigator.userAgent)){ // 我是安卓浏览器 } if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){ // 我是苹果浏览器 }
这样的话就有如下的代码了:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <title>positionSticky</title> <style> * {margin: 0;padding: 0;} .header {width: 100%;height: 100px;background: red;} .container {width: 100%;height: 1000px;background: #ccc;} .liveDiv {top: 0;width: 100%;height: 50px;background: green;} .sticky {position: -webkit-sticky;position: -moz-sticky;position: -ms-sticky;position: -o-sticky;position: sticky;} .scale {transform: scale(0.5);transform-origin: 0% 0%;} </style> <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.js"></script> </head> <body> <div class="header"></div> <div class="container"> <div class="liveDiv"></div> </div> <script> /* * 菜单移动到顶部后定位在顶部 * message[菜单的id名或者class类名] * height[菜单距离顶部的距离] */ function navChangeArea(message, height) { var liveDiv = $("#" + message).length ? $("#" + message) : $("." + message); if(/android/i.test(navigator.userAgent)){ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (scrollTop < height) { liveDiv.css("position", "relative"); } else { liveDiv.css("position", "fixed"); } } if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){ liveDiv.addClass("sticky"); } } $(window).bind("scroll", function() { navChangeArea("liveDiv", 100); }); $(window).bind("touchmove", function() { navChangeArea("liveDiv", 100); }); </script> </body> </html>
这样的话在安卓和苹果下都完美的兼容了,依然给个二维码,大家体验一下吧。
相关文章推荐
- position:sticky介绍 页面滚动导航条始终在最顶部的实现方法
- 使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果
- 使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果
- 移动端,由页面定位的滚动区域引起光标可以跟页面滑动
- div盒子position:fixed定位后无法滚动到页面顶部了
- CSS/JS 实现滑动页面,到一定位置,position 定位设置为fixed,否则用absolute;
- 微信小程序----导航栏滑动定位(实现CSS3的position:sticky效果)
- 当页面有position:fixed的悬浮菜单时,如何调整锚定位的时候不被悬浮菜单挡住?
- 外部系统集成BIEE 11g页面同时去掉顶部工具栏和仪表盘菜单
- 本文给大家介绍在Android中如何实现顶部导航菜单左右滑动效果。
- jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
- android侧滑菜单SlidingMenu加上手势滑动及首次运行引导页面混合使用
- 移动端web页面使用position:fixed问题
- UIWebView在加载页面之后上下滑动超出界面的时候背景色调整
- 解析 Page.MaintainScrollPositionOnPostBack 属性 页面刷新后定位
- listview滑动顶部停靠(stickyListHeadersListView)
- 按下按钮后页面的滚动条向下(或向上)滑动,松开之后便停留在当前位置的效果如何实现?
- Android控件定制--具有滑动页面的容器+具有滑动菜单的容器【附效果图附源码】
- jQuery实现页面滚动时元素智能定位,页面导航栏会自动定位到浏览器顶部
- DIV+CSS布局入门示例(四)页面顶部 列表<li>制作菜单