Developed a mobile webpage, which has a function that when the page scrolls to a certain element, it will be fixed at the top.
The html code is as follows:
<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); })
The reason can be found here http://www.oschina.net/question/1092_81432
Inside Introduced the solution, which can be solved through jquery moblie
However, in view of the rendering performance problem of the framework itself, you can consider using iScroll.js to solve it
Use iScroll to solve the problem of position:fixed failure in mobile browsers
You can calculate it dynamically, or use position: absolute