<!DOCTYPE html>
<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悬浮吸顶
原文地址：https://www.cnblogs.com/lml-lml/p/10143969.html