<!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>
