ele.getBoundingClientRect()的方法是可以获得一个元素在整个视图窗口的位置

可以return的值有width,height,top,left,x,y,right,bottom

场景

当你的一个div是处在viewport的一个中部位置

你想要的效果是当页面滚动到这个div的时候，这个div就固定在页面的顶部位置，其它滚动不变

思路

实现的思路可以利用这个方法来拿到这个div的top值

这个top值就是这个div到viewport的top值

监听页面的滚动事件 然后当这个top值<=0的时候 你可以给这个div加一个fixed固定的一个css样式

就可以实现这样一个效果了

好像貌似兼容性不是很好啊

利用getBoundingClientRect()来实现div容器滚动固定的更多相关文章

  1. 左侧 随着页面滚动固定 fixed. scroll .scrollTop

    1.图片. 要求:随着页面滚动 . 左侧应该顶着 浏览器顶部, 向上回滚, 就恢复原状. 2. 代码: html <div class="all "> <!-- ...

  2. 设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  3. 滚动固定TAB在顶部显示

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  4. 转载网页博客：ie7bug:div容器下的img与div存在间隙

    1.代码及在浏览器上的显示 ie7: ie8+: Firefox: Chrome: 可以看出ie7上在div容器下添加img,div与img中有间隙,而在ie8+和其他浏览器上均显示正常 网页源代码如 ...

  5. td内容自动换行 ,td超过宽度显示点点点… , td 使用 overflow:hidden 无效，英文 数字 不换行 撑破div容器

    我们可以先给表格 table上 固定一个宽度 不让表格撑破 width: 747px; table-layout:fixed; 然后我们在td上加上如下样式 style="width:100 ...

  6. 5种样式实现div容器中三图摆放实例对比说明

    代码地址如下:http://www.demodashi.com/demo/11593.html 效果演示: demo点查看效果 需求说明: 如下图所示为设计图,希望在图片上传无规则无规律的情况下实现设 ...

  7. 控制DIV内容滚动的方法，实现不用拖滚动条就可以看到最新消息

    三种控制DIV内容滚动的方法: 本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群:   281442983 (点击链接加入群:http://jq.qq.com/?_wv ...

  8. DIV设置了固定宽高出现文字(文本)的不能自动换行

    如果你的div设置了固定的width和height,有时会出现文字不能自动换行的情况 查过相关资料后才知道,只有英文文本才会出现不能自动换行的情况,(中文不存在)而原因是因为英文文本之间没有加空格,浏 ...

  9. div容器内文本对齐--神奇的css

    有时候使用一些css往往能达到意想不到的效果 最近需要在页面上显示读取的文本内容,中英文混杂着,我把它们统统抛到div中div设置了宽度,效果是相当糟糕,左对齐,右端长短不一,有的超出长度,有的不够长 ...

随机推荐

  1. YBT 1.1 贪心算法

    本人因为过于懒所以以后就将题解放进原文件中,存入百度网盘,自行下载,里面包含题目网站,源文件,与相应题解(这次没有写) 链接: https://pan.baidu.com/s/1eSoQ_LFWMxF ...

  2. 【初级算法】2.买卖股票的最佳时机 II

    题目: 给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你可以尽可能地完成更多的交易(多次买卖一支股票). 注意:你不能同时参与多笔交易(你必 ...

  3. LVM分区

    使用LVM对磁盘进行初始化 pvcreate /dev/vdd 创建卷组 vgcreate vg /dev/vdd 备注:vg是卷组的名称,可改变. 查看卷组的详细信息 vgdisplay 下图是我执 ...

  4. bzoj4810 [Ynoi2017]由乃的玉米田 bitset优化+暴力+莫队

    [Ynoi2017]由乃的玉米田 Time Limit: 30 Sec  Memory Limit: 256 MBSubmit: 917  Solved: 447[Submit][Status][Di ...

  5. HBase客户端访问超时的多个因素及参数

    在一个需要低延时响应的hbase集群中,使用hbase默认的客户端超时配置简直就是灾难. 但是我们可以考虑在客户端上加上如下几个参数,去改变这种状况: 1. hbase.rpc.timeout: RP ...

  6. Maven命令创建java项目

    ------------------------------java项目搭建--------------------------- 使用Maven构建一个简单的Java项目 1.进入命令行,执行下面的 ...

  7. java线程的基本概念

    进程和线程 进程的诞生 操作系统中有2个任务A,B,任务A先执行,执行到一半需要io,因此要大量时间,在这个时间段内cpu是空闲的,浪费了资源,于是就有进程,当A暂时无法利用cpu,但是又不能销毁时, ...

  8. LightOJ 1129 - Consistency Checker Trie树模板

    题意:给出n条串判断是否存在一个串为另一个串的前缀. 思路:套Trie树的模板,先全部插入,再查找每个字串,如果查找字串完毕,但还存在下一个节点,说明存在前缀. /** @Date : 2016-11 ...

  9. [洛谷P4768] [NOI2018]归程 (kruskal重构树模板讲解)

    洛谷题目链接:[NOI2018]归程 因为题面复制过来有点炸格式,所以要看题目就点一下链接吧\(qwq\) 题意: 在一张无向图上,每一条边都有一个长度和海拔高度,小\(Y\)的家在\(1\)节点,并 ...

  10. bzoj 4034: [HAOI2015]树上操作——树链剖分

    Description 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个 操作,分为三种: 操作 1 :把某个节点 x 的点权增加 a . 操作 2 :把某个节点 x 为根的子树中 ...