如下移动端索引列表页面（点击某元素后弹出的页面）

　   我想用 $(window).scrollTop(); 获取页面滚动后距离顶部的距离，但获取到的值总是0

　　

　　　期间查了很久，但都无疾而终，后来看到一篇博客说是浮动影响了，抱着试一试的心态去清除浮动，然而并卵

 　  此时，我灵光一闪，难道是定位影响了？（这个弹出页面最外层用了 fiexd 固定定位）
　　

　  于是我取消固定定位，终于可以用 $(window).scrollTop(); 获取到高度了

　　

　　正当我欣喜之时，页面布局出现混乱，因为取消固定定位后，索引列表页面就不在脱离文档流了

　　

　　注：目前我不知道应该怎么解决这个问题（能获取到滚动后距离顶部的高度又不会造成布局混乱）如果有小伙伴有好的方法，欢迎留言指教，感谢

　　

　　补充：PC端获取页面滚动后到顶部距离最好用下面的方式，这样可兼容所有主流浏览器

　　　　document.documentElement.scrollTop || document.body.scrollTop；

　　　

固定定位导致$(window).scrollTop();获取滚动后到顶部距离总是为0的更多相关文章

  1. jquery获取元素到页面顶部距离

    jquery获取元素到页面顶部距离的语句为: $(selector).offset().top

  2. iOS 固定定位不兼容、input获取焦点后位置不对。

    第一次写博客~  大家悠着看,有则改之,无则加冕,对不对的给个回复,让我知道你的存在. 在做活动页的时候,经常会碰到一些需要弹出显示的输入框(情节前提:本人安卓机~),前天自己写的时候自己调试没问题后 ...

  3. $(window).scrollTop() 获取当前的鼠标位置 offset.left()指定标签在html中的坐标 offset.top() 指定标签在html中的坐标position() 指定标签相对父(relative)标签的坐标

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 我是如何通过debug成功甩锅浏览器的：解决fixed定位元素，在页面滚动后touch事件失效问题

    如果你关注我应该知道,我最近对PC端页面进行移动适配.在这个过程中,为了节省用户300ms的时间,同时给予用户更及时的点击反馈(这意味着更好的用户体验),我在尝试使用移动端独有的 touchstart ...

  5. iOS tableView 滚动后回到顶部

    - (void)scrollViewDidScroll:(UIScrollView *)scrollView { CGPoint contentOffsetPoint = self.tableView ...

  6. jquery的固定定位效果

    今天做了个固定定位的效果.比如对导航需要进行固定定位效果: 当没有滚动到导航下面,导航正常显示. 当滚动到导航下面,导航就固定到顶部. 这个效果使用了jquery的方法实现,具体思路为: 1)首先获取 ...

  7. $(document).scrollTop()与$(window).scrollTop()

    $(document).scrollTop() 获取垂直滚动的距离 即当前滚动的地方的窗口顶端到整个页面顶端的距离 要获取顶端 只需要获取到scrollTop()==0的时候 就是顶端了 要获取底端 ...

  8. js,jquery 获取滚动条高度和位置, 元素距顶部距离

    一,获取滚动条高度和位置 jQuery 获取览器显示区域的高度: $(window).height();  获取浏览器显示区域的宽度:$(window).width(); 获取页面的文档高度:$(do ...

  9. input固定定位后，当input框获取到焦点时，会离开手机软键盘的解决方法

    前些天做页面时候遇到这样一个问题,将input框用position:fixed固定定位在最底部的时候,当Input获取焦点的时候,input框离开了手机软键盘,而不是吸附在软键盘上,效果如下图: 找了 ...

随机推荐

  1. 避免HBase PageFilter踩坑，这几点你必须要清楚

    有这样一个场景,在HBase中需要分页查询,同时根据某一列的值进行过滤. 不同于RDBMS天然支持分页查询,HBase要进行分页必须由自己实现.据我了解的,目前有两种方案, 一是<HBase权威 ...

  2. VMware——虚拟机的安装

    VMware——虚拟机的安装 摘要:本文主要记录了虚拟机的安装过程. 下载 可以去官网或者其他可靠站点下载虚拟机的安装包. 这次用的版本是:VMware-workstation-full-14.1.7 ...

  3. C#和Java的对比

    C#和Java的对比 C#是微软公司在2000年6月发布的一种面向对象的高级程序设计语言:Java是Sun公司在1996年1月发布的一种面向对象的.平台独立的高级程序设计语言.它们是现在最流行的面向对 ...

  4. CSS animation属性

    定义和用法 animation属性是下列属性的一个缩写属性: animation-name animation-duration animation-timing-function animation ...

  5. maven 学习---Maven构建自动化-Hudson

    建立自动化定义场景,依赖项目建设过程中被启动,一旦项目生成成功完成,以确保相关的项目是稳定的. 实例 考虑一个团队正在开发一个项目总线核心API上的其他两个项目的应用程序,网页UI和应用程序的桌面UI ...

  6. 8个有意思的JavaScript面试题

    摘要: 神奇的JS系列. 作者:前端小智 原文:8个问题看你是否真的懂 JS Fundebug经授权转载,版权归原作者所有. JavaScript 是一种有趣的语言,我们都喜欢它,因为它的性质.浏览器 ...

  7. E05 【餐厅】What kind of coffee or tea would you like？

    核心句型 What  kind  of  coffee or tea would you like? 你想喝什么咖啡或者茶? What  would  you like? 你喜欢什么?/你想要什么? ...

  8. JAVA并发-Executor

    结构 类继承图: 上面的各个接口/类的关系和作用: Executor 执行器接口,也是最顶层的抽象核心接口, 分离了任务和任务的执行. ExecutorService 在Executor的基础上提供了 ...

  9. 残差residual VS 误差 error

    https://blog.csdn.net/jmydream/article/details/8764869 In statistics and optimization, statistical e ...

  10. zz模型剪枝

    论文总结 - 模型剪枝 Model Pruning  发表于 2018-10-03 模型剪枝是常用的模型压缩方法之一.这篇是最近看的模型剪枝相关论文的总结. Deep Compression, Han ...