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 ( ...
随机推荐
- JOptionPane提示框的一些常用用法
1.1 showMessageDialog 显示一个带有OK 按钮的模态对话框. 下面是几个使用showMessageDialog 的例子: JOptionPane.showMessageDialog ...
- CorelDRAW教程：怎样绘制制作箭头流程图？
箭头流程图主要由矢量图和连接符组成,通过图形之间的顺序阐述的一个过程,应用也是非常广泛,有些软件中会自带流程图,对于CDR这款矢量绘图软件来说,手动制作流程图是简单且高效的.首先CorelDRAW中就 ...
- 搭建hadoop、hdfs环境--ubuntu（完全分布式）
最近在学习hadoop相关知识,就在本机上安装了hadoop,遇到了一些坑,也学到了不少.仅此记录我的安装过程,及可能遇到的问题.供参考.交流沟通见页末. 软件准备 > 虚拟机(VMware) ...
- socket&socketserver网络编程
1.套接字与套接模块 套接字是为特定网络协议(例如TCP/IP,ICMP/IP,UDP/IP等)套件对上的网络应用程序提供者提供当前可移植标准的对象.它们允许程序接受并进行连接,如发送和接受数据.为了 ...
- Centos7下安装Mongodb
Mongodb网盘路径:链接:https://pan.baidu.com/s/1rWJCPZ59EAW25ha1UF5czw 密码:u3zq 1.把安装包上传到linux服务器上,解压,然后我们把mo ...
- jQuery中的DatePicker今天按钮不起作用
转载:http://codego.net/63433/ jquery-ui 日期选择器datepicker我想用 jQueryUI 的 DatePicker ,并显示“今天”按钮, 但它不工作,它也不 ...
- python dns 服务器
import socketserver import struct import threading # DNS Query class SinDNSQuery: def __init__(self, ...
- PHP下的异步尝试三：协程的PHP版thunkify自动执行器
PHP下的异步尝试系列 如果你还不太了解PHP下的生成器和协程,你可以根据下面目录翻阅 PHP下的异步尝试一:初识生成器 PHP下的异步尝试二:初识协程 PHP下的异步尝试三:协程的PHP版thunk ...
- 洛谷10月月赛II
#A: P4924 [1007]魔法少女小Scarlet 这道题考了矩阵旋转 其实很考验推公式的能力和代码能力 这里有个小技巧 可以设(x, y)为原点,然后去推公式,然后实际操作中横坐标加上x,纵坐 ...
- Java并发和多线程1：并发框架基本示例
Executor框架是指java 5中引入的一系列并发库中与executor相关的一些功能类,其中包括ThreadPool,Executor,Executors,ExecutorService,Com ...