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. [LOJ 6000]搭配飞行员

    link 其实就是一道二分图匹配板子,我们建立$S$,$T$为源点与汇点,然后分别将$S$连向所有正驾驶员,边权为$1$,然后将副驾驶员与$T$相连,边权为$1$,将数据中给出的$(a,b)$,将$a ...

  2. [linux/net]策略路由实现特定主机特定路径

        echo 200 silence >> /etc/iproute2/rt_tables ip rule add from 10.192.0.230 table silence ip ...

  3. Moq/moq4

    moq The most popular and friendly mocking framework for .NET var mock = new Mock<ILoveThisFramewo ...

  4. Git新手上路，让你快速掌握Git的基本使用

    github是一个基于git的代码托管平台,付费用户可以建私人仓库,我们一般的免费用户只能使用公共仓库,也就是代码要公开.这对于一般人来说公共仓库就已经足够了. 1.注册账户以及创建仓库     要想 ...

  5. 策略模式 C#

    策略模式定义了一系列的算法,并将每一个算法封装起来,而且使它们还可以相互替换.策略模式让算法独立于使用它的客户而独立变化. 抽象策略角色: 策略类,通常由一个接口或者抽象类实现. 具体策略角色:包装了 ...

  6. bzoj1862/1056: [Zjoi2006]GameZ游戏排名系统

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1862 http://www.lydsy.com/JudgeOnline/problem.ph ...

  7. PHP is_null，empty以及isset，unset的区别

    1.empty 判断一个变量是否为“空”.null.false.00.0.’0′.』.为以上值的变量在检测時都将返回true. 2.isset 判断一个变量是否已经设置.0.00.’0′.』.’ ‘. ...

  8. 【CC2530入门教程-01】CC2530微控制器开发入门基础

    [引言] 本系列教程就有关CC2530单片机应用入门基础的实训案例进行分析,主要包括以下6部分的内容:[1]CC2530微控制器开发入门基础.[2]通用I/O端口的输入和输出.[3]外部中断初步应用. ...

  9. recycleView实现item点击更改该item颜色，其它item颜色变回

    项目中需要横向滚动效果,按照以前的思路,我会写一个ScrollView,里边加一个LinearLayout,在代码中动态加入控件,然后动态删除或者改变颜色,现在android有了新控件Recycler ...

  10. Python第三方库matplotlib（2D绘图库）入门与进阶

    Matplotlib 一 简介: 二 相关文档: 三 入门与进阶案例 1- 简单图形绘制 2- figure的简单使用 3- 设置坐标轴 4- 设置legend图例 5- 添加注解和绘制点以及在图形上 ...