css3 position:sticky 固定导航平滑过渡
2016-08-05 17:42
537 查看
position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed的合体。
在可视区域内,表现是 relative属性
超过区域外,固定在屏幕上,表现是 fixed属性
一般方法是用js控制 position为 relative 和 fixed切换,但手机上滑动会有些滞后,卡顿,而 sticky属性能平滑过渡。
判断sticky代码:
对不支持sticky的处理:
css写法:
注意:如果body的css 设置overflow: hidden;
则 sticky失效。
在可视区域内,表现是 relative属性
超过区域外,固定在屏幕上,表现是 fixed属性
一般方法是用js控制 position为 relative 和 fixed切换,但手机上滑动会有些滞后,卡顿,而 sticky属性能平滑过渡。
判断sticky代码:
function supportSticky(str){ var t, n = str, e = document.createElement("i"); e.style.position = n; t = e.style.position; e = null; return t === n; }
对不支持sticky的处理:
$(window).bind('scroll', function () { var isSticky = supportSticky('sticky') || supportSticky('-webkit-sticky'); if(!isSticky){ if ($(this).scrollTop() < top_nav) { $el.removeClass('fixed'); } else { $el.addClass('fixed'); } } });
css写法:
.scrollMenu{ position: -webkit-sticky; position: sticky; top: 0; width: 100%; height: 36px; z-index: 1000; }
注意:如果body的css 设置overflow: hidden;
则 sticky失效。
相关文章推荐
- 服务器控件单选,多选和表格样式冲突,多边框
- HTML+CSS+JQ实现图片轮播效果
- 百度前端笔试题 css3画三角形
- CSS边框与背景[下]
- H5学习之24 CSS定位
- 手机wap端用户注册表单(html+css)
- html中的css样式
- H5学习之23 CSS 水平对齐(定位,调整位置)
- css基础重要几点
- css之IE透明度
- H5学习之22 CSS-导航栏的创建
- CSS实现背景图尺寸不随浏览器缩放而变化
- CSS实现背景图尺寸不随浏览器缩放而变化
- CSS 中加号选择器的使用
- 手把手教你玩转酷炫CSS3 3D技术!
- 各浏览器独有的伪元素 控制表单样式
- CSS引用方式
- less样式表
- css3实现三角形
- IE 浏览器下的兼容(onclick)