滚动定位错乱_html/css_WEB-ITnose
php中文网
发布： 2016-06-24 12:04:11
原创
1601人浏览过
开发了个手机网页，其中有个功能是当页面滚动到某个元素时，将其固定在顶部。
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
HTML速学教程(入门课程)
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
来源：php中文网
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
461
html动画如何翻转_HTML元素翻转（CSS transform/rotateY）动画方法
可通过CSStransform属性实现HTML元素翻转动画。一、使用rotateY实现水平翻转，结合transition添加过渡效果，hover时应用rotateY(180deg)并设置transform-style:preserve-3d保持3D空间。二、利用backface-visibility:hidden隐藏背面，实现卡片双面翻转，避免内容重叠。三、通过@keyframes定义从rotateY(0)到rotateY(360deg)的动画，绑定animation属性实现自动循环翻转，可调整
2025-11-05 09:25:02
html代码如何建站_HTML代码搭建网站全流程与部署方法
用HTML建站需先规划结构，编写页面代码，添加样式与交互，本地测试后通过GitHubPages免费部署上线。1.创建包含首页、关于页等的HTML文件；2.使用文本编辑器编写标准HTML结构并引入CSS；3.添加style.css和script.js提升美观与功能；4.浏览器打开index.html检查链接、图片加载及响应式效果；5.将文件推送至yourname.github.io仓库主分支；6.访问生成的网址即可查看网站。后续可优化视觉、统计访问量或绑定自定义域名。核心是结构清晰、内容完整、部署
2025-11-05 09:23:02
热门推荐
广告热门教程
更多>
相关推荐
热门推荐
最新课程
-
全方位解读Laravel框架及实战视频教程49048次学习
收藏
-
C#+WPF上位机开发课程（模块化与反应式编程）73769次学习收藏
-
90分钟搞定Web基础（网络协议|HTTP|Web服务器）23017次学习收藏
