Scroll positioning disorder_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:04:11
Original
1275 people have browsed it

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>
Copy after login


The js code is as follows:
$(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);		})
Copy after login

That is, set fixed to fix this ul. The problem now is that it is only under iPhone This ul cannot be fixed at the top, and other Android and PC simulations have no problem. After searching on Google, it said that iPhone does not support the fixed attribute. Please give me some advice.


Reply to discussion (solution)

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template