滚动定位错乱_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 12:04:11
asal
1275 orang telah melayarinya

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


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);		})
Salin selepas log masuk

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


回复讨论(解决方案)

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

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

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan