js悬浮吸顶
<head>
<meta charset="UTF-8">
<title>吸顶和锚点链接</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.perent {
background: #ccc;
width: 100%;
}
p {
text-align: center;
}
.header {
width: 1200px;
margin: 0 auto;
height: 60px;
background: greenyellow;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
margin: 0 auto;
text-align: center;
z-index: 10;
background: #fff;
box-shadow: 2px 0px 20px rgba(0, 0, 0, 0.3);
}
.tab {
margin: 20px auto;
height: 60px;
overflow: hidden;
}
.tab li {
width: 33%;
float: left;
border: 1px solid #007AFF;
text-align: center;
padding: 10px 0;
border-radius: 10px;
cursor: pointer;
}
.child{
width: 600px;
height: 100px;
background: palegoldenrod;
margin: 200px auto;
border-radius: 10px;
}
</style>
<body>
<div class="perent">
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<div class="header">哈哈哈哈，猜我是谁啊</div>
<ul class="tab" id="tab">
<li class="item">11111</li>
<li class="item">22222</li>
<li class="item">33333</li>
</ul>
<div class="child">1111111111111</div>
<div class="child">2222222222222</div>
<div class="child">3333333333333</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js">
</script>
<script>
window.addEventListener("scroll", this.handleScroll);
function handleScroll() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var tabOffsettop=document.getElementById('tab').offsetTop
if(scrollTop >= 278) {
$('.header').addClass("fixed")
$('.tab').addClass("fixed")
} else {
$('.header').removeClass("fixed")
$('.tab').removeClass("fixed")
}
}
</script>
js悬浮吸顶的更多相关文章
- js 实现吸顶效果 || 小程序的吸顶效果
小程序吸顶效果 <!--index.wxml--> <view class="container"> <view class='outside-img ...
- 原生js实现吸顶导航和回到顶部特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js之吸顶效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Android笔记之ExpandableListView（悬浮吸顶Demo）
参考链接 ExpandableListView中item的定位问题 - RELY_ON_YOURSELF的博客 - CSDN博客(感觉写得很好,讲到了组位置.子位置及原始位置之间的转换) how to ...
- react 吸顶实现
今天获取到一个需求,其实就是吸顶的需求,页面下滑,某一块dom隐藏时发生吸顶现象.这种特效其实老生常谈了,但是在这次做的时候,突发奇想,能否将其做成一个 hook ,从而实现出传递ref即可使得 do ...
- 5行js代码搞定导航吸顶效果
一.HTML布局 首先写HTML布局 <body> <div id="wrap"></div> </body> 二.CSS样式 给点 ...
- react.js中实现tab吸顶效果问题
在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab ...
- js实现导航栏的吸顶操作
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- 原生js实现导航栏吸顶
实现滑动滚动条让导航栏吸顶原理:主要是通过监听scroll,设定一个滚动条垂直位移作为临界,让导航栏吸顶或者取消吸顶. 话不多说了,代码如下: window.onscroll = function ( ...
随机推荐
- JAVA-mysql读写分离插件介绍
kingshard是一个由Go开发高性能MySQL Proxy项目,kingshard在满足基本的读写分离的功能上,致力于简化MySQL分库分表操作:能够让DBA通过kingshard轻松平滑地实现M ...
- C语言宏定义#define用法
#define是C语言中提供的宏定义命令,其主要目的是为程序员在编程时提供一定的方便,并能在一定程度上提高程序的运行效率,但学生在学习时往往不能 理解该命令的本质,总是在此处产生一些困惑,在编程时误用 ...
- PHP中的类函数和类对象
1.class_exists()函数接受表示类的字符串,检查并返回布尔值.如果类存在,返回true,否则返回false: echo class_exists('Computer'); 2.get_cl ...
- 关于优化for循环的注意的事项
for循环注意事项: 1.for循环内部尽量少做数据库查询之类的IO代价大的操作 2.尽量控制for循环的次数,不多做无用功 3.能一次加载在内存中的,就不要通过循环来多次查询数据库,除非数据量过大. ...
- CentOS7上安装google谷歌浏览器
1.首先进入根目录,然后进入etc/yum.repos.d目录下,创建google-chrome.repo文件 cd / cd etc/yum.repos.d vim google-chrome. ...
- JavaScript高级程序设计部分笔记
1.JavaScript由三个不同的部分组成:ECMAScript(核心).DOM(文档对象模型).BOM(浏览器对象模型). 2.数据的引用类型 Object类型 Array类型 Data类型 Re ...
- HDU 5421 Victor and String (回文自动机)
题目大意:让你维护一个字符串,支持在开头结尾插入字符,以及查询本质不同的回文串数量以及回文串总数量 开头结尾都维护一个$last$指针,如果插入新字符后,整个串是一个回文串,就把另一个$last$赋值 ...
- 2019-03-28 Python SQL 的注释
SQL Server 多行注释 : ctrl + k + c SQL Server 单行注释: -- Python 单行注释:# Python多行注释:''' '''
- Vijos 1456 最小总代价 （状压dp）
看到这道题n只有16,就可以想到状压dp 每个人只有经过或者没经过,那就用1表示经过,0表示没经过 但是不是当前在谁那里,所以再加一维来记录 所以f[state][i]表示在物品在i,当前的状态是st ...
- ucore_lab0
一直想好好学习一下操作系统课程,去一个Mooc网站上找了一门操作系统的课程.这便是里面的配套实验. 实验指导:点这里 lab0主要是准备相关的操作环境.课程推荐使用qemu作为硬件模拟器,推荐运行环境 ...