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

　   我想用 $(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. 2019年JVM最新面试题，必须收藏它

    1.JVN内存结构 方法区和对是所有线程共享的内存区域:而java栈.本地方法栈和程序员计数器是运行是线程私有的内存区域. Java堆(Heap),是Java虚拟机所管理的内存中最大的一块.Java堆 ...

  2. LinuxShell——认识BATH这个Shell

    LinuxShell——认识BATH这个Shell 摘要:本文主要了解了Linux系统中的Shell,以及什么是BATH. 什么是Shell Shell是一个命令行解释器,它为用户提供了一个向Linu ...

  3. ASP.NET Core MVC 过滤器

    参考网址:https://www.cnblogs.com/dotNETCoreSG/p/aspnetcore-4_4_3-filters.html ASP.NET Core有五种类型的过滤器,每个过滤 ...

  4. HeadFirst设计模式---简单工厂

    简单工厂的理解 简单工厂不是设计模式的一种,只是代码规范而且.也就是说构造一个披萨工厂出来,按不同味道生产不同的披萨. 类图 抽象披萨 public abstract class AbstractPi ...

  5. 使用 Docker Alpine 镜像安装 nginx

    微镜像Alpine,Alpine Linux 是一款独立的⾮商业性的通⽤ Linux 发行版,Alpine Linux 围绕 musl libc 和 busybox 构建,尽管体积很小,Apline ...

  6. vue 开发系列(九) VUE 动态组件的应用

    业务场景 我们在开发表单的过程中会遇到这样的问题,我们选择一个控件进行配置,控件有很多中类型,比如文本框,下来框等,这些配置都不同,因此需要不同的配置组件来实现. 较常规的方法是使用v-if 来实现, ...

  7. 其他综合-搭建本地yum仓库及自制rpm包

    搭建本地yum仓库及自制rpm包 实验目的 为方便本地 yum 的管理,建本地 yum 仓库,实现局域网内部快速安装常用软件 实验环境 VMware:12版本 系统版本:CentOS Linux re ...

  8. conan使用(三)--打包只有头文件的库

    参考:https://docs.conan.io/en/latest/howtos/header_only.html?highlight=header%20only 对于只含头文件的库打包非常简单,以 ...

  9. day29 8_8 TCP上传文件socketserver的应用

    一.文件上传 对于一些比较大的文件,当传输的数据大于内存时,显然,一次性将数据读取到内存中,在从内存传输到服务器显然时不可取的. 所以,在上传文件时,可以在with open打开文件,边读取文件边发送 ...

  10. VSCode变换python的调试解释器

    假如一个电脑上有多个Python的环境,想要设置不同的python解释器用于调试. VSCode 的设置,是通过.json的文本来配置的.打开文本的方式: 打开后的文件如下所示: 可以试试“new s ...