Heim >Web-Frontend >HTML-Tutorial >滚动定位错乱_html/css_WEB-ITnose

滚动定位错乱_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:04:111301Durchsuche

开发了个手机网页,其中有个功能是当页面滚动到某个元素时,将其固定在顶部。
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>


js代码如下:
$(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);		})

即设置fixed将这个ul给固定住,现在的问题是仅在iphone下这个ul无法固定在顶部,其他安卓以及pc端模拟都没有问题。谷歌了下说iphone是不支持fixed属性,大婶请指点思路。


回复讨论(解决方案)

产生原因可以看下这里  http://www.oschina.net/question/1092_81432 
里面介绍了解决方法 可以通过jquery moblie 来解决

不过鉴于框架本身的渲染性能问题,你可以考虑利用iScrool.js来处理
用iScroll解决手机浏览器position:fixed失效的问题

你可以动态计算啊,还是用 position: absolute

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn