JS实现网站吸顶条


Posted in Javascript onJanuary 08, 2020

本文实例为大家分享了JS实现网站吸顶条的具体代码,供大家参考,具体内容如下

今天写一个关于网站中吸顶条的思路

  1、吸顶条就是在网页移动到一定距离的时候,让某个内容,固定显示在一个位置

  2、获取网页中滚动条的滚动距离

  3、判断要显示的内容在滚动条,滚动到一定距离后,让他显示

下面是代码部分

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 #content{
  width: 100%;
  height: 50px;
  background: red;
 }
 .father{
  position: fixed;
  top:0;
  left: 0;
 }
 </style>
</head>
<body style="height: 3000px;">
 <p>kdsjfkljsdklfjd</p>
 <p>kdsjfkljsdklfjd</p>
 <p>kdsjfkljsdklfjd</p>
 <p>kdsjfkljsdklfjd</p>
 <p>kdsjfkljsdklfjd</p>
 <p>kdsjfkljsdklfjd</p>
 <div id="content"></div>
</body>
<script>
//绑定滚动条移动事件
window.onscroll = function(){
 var bb = document.body.scrollTop || document.documentElement.scrollTop;//解决浏览器兼容问题
 if(bb >500){
      //小与500的时候,让它添加这个类
 content.className = "father"
 }else{
      //否则就是空
 content.className = "";
 }
}
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
js取滚动条的尺寸的函数代码
Nov 30 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
浅谈Javascript实现继承的方法
Jul 06 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 Javascript
BootStrap入门学习第一篇
Aug 28 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 Javascript
js实现移动端吸顶效果
Jan 08 #Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 #Javascript
微信小程序实现吸顶效果
Jan 08 #Javascript
JS实现吸顶特效
Jan 08 #Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 #Javascript
electron+vue实现div contenteditable截图功能
Jan 07 #Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 #Javascript
You might like
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
TMDPHP 模板引擎使用教程
2012/03/13 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
Python中进程和线程的区别详解
2017/10/29 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
Django  ORM 练习题及答案
2019/07/19 Python
python tkinter canvas使用实例
2019/11/04 Python
Python谱减法语音降噪实例
2019/12/18 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
python自动生成sql语句的脚本
2021/02/24 Python
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
装潢设计专业推荐信模板
2013/11/26 职场文书
乐观大学生的自我评价
2014/01/10 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers