开发了个手机网页,其中有个功能是当页面滚动到某个元素时,将其固定在顶部。
html代码如下:
<header style="height: 40px;"> <ul class="ui-follow" style="position:static;z-index:998;"> <li class="current"> 详情 </li> <li> 评价 <span class="review-count" id="review"></span> </li> </ul> </header>
$(function(){ setTimeout(function(){ var navH = $(".ui-follow").offset().top; $(window).scroll(function(){ var scroH = $(this).scrollTop(); if(scroH >= navH){ $(".ui-follow").css({"position":"fixed","top":0,"left":0,"right":0,"z-index":998}); }else if(scroH<navH){ $(".ui-follow").css({"position":"static"}); } }) },1000); })
产生原因可以看下这里 http://www.oschina.net/question/1092_81432
里面介绍了解决方法 可以通过jquery moblie 来解决
不过鉴于框架本身的渲染性能问题,你可以考虑利用iScrool.js来处理
用iScroll解决手机浏览器position:fixed失效的问题
你可以动态计算啊,还是用 position: absolute