编程 Javascript

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>

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

JS实现网站吸顶条

- Author -

private白

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Prototype使用指南之hash.js

Jan 10 Javascript

Three.js源码阅读笔记(基础的核心Core对象)

Dec 27 Javascript

js模仿jquery的写法示例代码

Jun 16 Javascript

js中的this关键字详解

Sep 25 Javascript

JS对象转换为Jquery对象实现代码

Dec 29 Javascript

js网页实时倒计时精确到秒级

Feb 10 Javascript

完美JQuery图片切换效果的简单实现

Jul 21 Javascript

Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题

Nov 22 Javascript

微信小程序生成携带参数的二维码

Oct 23 Javascript

layui清除radio的选中状态实例

Nov 14 Javascript

Electron+vue从零开始打造一个本地播放器的方法示例

Oct 27 Javascript

react中的DOM操作实现

Jun 30 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