利用getBoundingClientRect()来实现div容器滚动固定
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容器滚动固定的更多相关文章
- 左侧 随着页面滚动固定 fixed. scroll .scrollTop
1.图片. 要求:随着页面滚动 . 左侧应该顶着 浏览器顶部, 向上回滚, 就恢复原状. 2. 代码: html <div class="all "> <!-- ...
- 设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏
设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...
- 滚动固定TAB在顶部显示
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 转载网页博客:ie7bug:div容器下的img与div存在间隙
1.代码及在浏览器上的显示 ie7: ie8+: Firefox: Chrome: 可以看出ie7上在div容器下添加img,div与img中有间隙,而在ie8+和其他浏览器上均显示正常 网页源代码如 ...
- td内容自动换行 ,td超过宽度显示点点点… , td 使用 overflow:hidden 无效,英文 数字 不换行 撑破div容器
我们可以先给表格 table上 固定一个宽度 不让表格撑破 width: 747px; table-layout:fixed; 然后我们在td上加上如下样式 style="width:100 ...
- 5种样式实现div容器中三图摆放实例对比说明
代码地址如下:http://www.demodashi.com/demo/11593.html 效果演示: demo点查看效果 需求说明: 如下图所示为设计图,希望在图片上传无规则无规律的情况下实现设 ...
- 控制DIV内容滚动的方法,实现不用拖滚动条就可以看到最新消息
三种控制DIV内容滚动的方法: 本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群: 281442983 (点击链接加入群:http://jq.qq.com/?_wv ...
- DIV设置了固定宽高出现文字(文本)的不能自动换行
如果你的div设置了固定的width和height,有时会出现文字不能自动换行的情况 查过相关资料后才知道,只有英文文本才会出现不能自动换行的情况,(中文不存在)而原因是因为英文文本之间没有加空格,浏 ...
- div容器内文本对齐--神奇的css
有时候使用一些css往往能达到意想不到的效果 最近需要在页面上显示读取的文本内容,中英文混杂着,我把它们统统抛到div中div设置了宽度,效果是相当糟糕,左对齐,右端长短不一,有的超出长度,有的不够长 ...
随机推荐
- [Leetcode] single number 找单个数
Given an array of integers, every element appears twice except for one. Find that single one. Note: ...
- [Leetcode] search in rotated sorted array ii 搜索旋转有序数组
Follow up for "Search in Rotated Sorted Array":What if duplicates are allowed? Would this ...
- BZOJ1202 [HNOI2005]狡猾的商人 【并查集】
1202: [HNOI2005]狡猾的商人 Time Limit: 10 Sec Memory Limit: 162 MB Submit: 4180 Solved: 2015 [Submit][S ...
- CF916E Jamie and Tree 解题报告
CF916E Jamie and Tree 题意翻译 有一棵\(n\)个节点的有根树,标号为\(1-n\),你需要维护一下三种操作 1.给定一个点\(v\),将整颗树的根变为\(v\) 2.给定两个点 ...
- 第三方库安装——requests
环境 操作系统:CentOS 6.7 32-bit Python:2.6.6 安装 pip install requests
- linux查找文件目录及mysql卸载
我们要卸载 mysql但是不知道其安装在哪里了,可以用 where +关键词 的方式查找,如上图 输入 whereis mysql 后,下面显示出了4个包含mysql的位置. ..... 查看安装m ...
- bzoj 1100 [POI2007]对称轴osi manacher
[POI2007]对称轴osi Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 771 Solved: 307[Submit][Status][Dis ...
- c# 合并两个有序数组
, , , , , }; , , , }; ArrayList lists = new ArrayList(); ArrayList temp = new ArrayList(); lists.Add ...
- Doc常用命令
1. 获取目录: dir 2. 清屏: cls
- Elasticsearch 5.6.5 安装教程
下载地址 https://www.elastic.co/downloads/past-releases/elasticsearch-5-6-5 安装环境 centos6.5 , jdk1.8 ...