html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮
在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果。
传统的fixed实现:
通过css中的属性position参数设为fixed,理由它相对于浏览器为绝对位置,通过设置right和bottom,使得div固定在右下角。例如:
.demo{
position: fixed;bottom: 10px;right: 10px;
}
但是这种实现,从一开始就悬浮在浏览器的右下角了。可以满足我们绝大多数需求,但是有时候会遇到这种情景:当我们浏览器滚动条到某个位置的时候,才触发div悬浮效果。下面将来介绍:
原生JS实现滚动到一定位置,实现div悬浮
实现方法是:需要通过js来监听浏览器滚动的距离,当滚动到多少距离的时候,我们来设置div的position参数。具体如下:
<style>
*{
margin: ;padding: ;
}
body{
height: 1500px;
}
.demo{
position: relative;left: 10px;top: 10px;z-index:;width: 500px;height: 200px;background: #F0AD4E;
}
</style>
//html
<p style="height: 100px;">测试</p>
<div class="demo" id="demo">
内容
</div>
js中代码:
function onscroll(distance){//s滚动的距离,offset默认为元素距离顶部的距离
var s = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || ,
dom = document.getElementById('demo'),
offset= dom.offsetTop || distance;
dom.style.position=s>offset?"fixed":"relative";
};
window.addEventListener('scroll',onscroll());
扩展:通过上面的js方法,同样可用实现让div到达多少距离的时候,实现显示或者隐藏, 比如我们需要做返回顶部的功能,当距离达到多少的时候就显示出来,
<a href="javascript:scrollTo(0,0);" id="demo">返回顶部</a>
html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮的更多相关文章
- 原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较
一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...
- js万年历,麻雀虽小五脏俱全,由原生js编写
对于前端来说,我们可能见到最多的就是各种各样的框架,各种各样的插件了,有各种各样的功能,比如轮播啊,日历啊,给我们提供了很大的方便,但是呢?我们在用别人这些写好的插件,框架的时候,有没有试着问一问自己 ...
- 使用原生js将轮播图组件化
代码地址如下:http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...
- 标签页(tab)切换的原生js,jquery和bootstrap实现
概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(ta ...
- 【前端性能】必须要掌握的原生JS实现JQuery
很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...
- JQuery&原生js ——实现剪刀石头布小游戏
前言 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架).jQuery设计的宗旨是“write L ...
- 通过游戏认识 --- JQuery与原生JS的差异
前言 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架).jQuery设计的宗旨是“write ...
- 原生JS一些操作
很久没写原生的JS了,上周做了一个小东西让我又重新了解了一下原生JS,以下记录一些常见的原生JS var canvArrow = document.getElementById('js-canv_ar ...
- ToDoList(原生JS)了解一下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Linux 文件系统常用命令
文件系统查看命令df df:查看分区,单位默认是KB df -h 统计目录或文件大小du du /etc/:会列出/etc/目录下的所有子目录所占的空间,最后给出/etc/目录的大小,属于高负载命令, ...
- java正则匹配 指定内容以外的 内容
今天,遇到一个需要 匹配出 指定内容以外的 内容的需求. 乍一看,需求貌视很简单啊,直接上 非贪婪模式的 双向零宽断言(有的资料上也叫 预搜索.预查.环视lookaround): 比如,我要匹配 串内 ...
- 官宣!ASF官方正式宣布Apache Hudi成为顶级项目
马萨诸塞州韦克菲尔德(Wakefield,MA)- 2020年6月 - Apache软件基金会(ASF).350多个开源项目和全职开发人员.管理人员和孵化器宣布:Apache Hudi正式成为Apac ...
- python XlsxWriter模块创建aexcel表格
https://blog.csdn.net/qq_41030861/article/details/82148777 安装使用pip install XlsxWriter来安装,Xlsxwriter用 ...
- 【php】 jsonp转数组函数jsonp_decode
分享一个可以跟json一样用的函数jsonp_decode,能把jsonp格式数据转为php数组或对象. /** * 把jsonp转为php数组 * @param string $jsonp js ...
- SpringMVC中的@RequestMapping注解
@RequestMapping:设置请求映射,把请求和控制层中的方法设置映射关系 属性: 当请求路径和@RequestMapping的value属性一致时,则该注解所标注的方法即为处理请求的方法 me ...
- qt解决release后数据库连接不上的问题
问题 : 明明已经设置了 "./xxx" , 为什么release之后数据库还是连不上呢 解决 : 项目中建立一个plugins文件夹 将qt安装目录下的sqldrivers复制到 ...
- MySQL数据表中有自增长主键时如何插入数据
原文链接:https://blog.csdn.net/RuobaiMEN/article/details/79794199 MySQL数据库表中有自增主键ID,当用SQL插入语句中插入语句带有ID列值 ...
- Android学习笔记点击事件和触摸事件的区别
当我们点击手机屏幕的时候Android系统不仅会触发单击事件,还会触发触摸事件.在Android中它会先触发触摸事件,如果这个触摸事件没有被消费掉再去触发单击事件 代码示例: MainActivty. ...
- PN532资料 NFC RFID V3模块
最新PN532链接: https://pan.baidu.com/s/1HyXk-VuF-24ZJ8zAVb9lcA 提取码: bgju 复制这段内容后打开百度网盘手机App,操作更方便哦