<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
body {
width: 98%;
height: 15000px;
margin: 0 auto;
}
.head {
width: 100%;
height: 70px;
background: black;
}
.head .head-right {
float: right;
width: 50%;
height: 30px;
line-height: 30px;
margin-top: 20px;
}
.head .head-right ul li {
float: left;
width: 20%;
color: #fff;
}
.tab1 {
width: 25%;
float: left;
background: #ccc;
height: 36px;
}
.div1 {
height: 36px;
width: 100%;
display: none;
}
.div1.show {
display: block;
}
.fixeds {
position: fixed;
top: 0;
}
.fixeds1 {
position: fixed;
top: 70px;
}
</style>
<body>
<div style="height:100px;">
</div>
<div class="head">
<div class="head-right">
<ul>
<li class="show">按鈕1</li>
<li>按鈕2</li>
<li>按鈕3</li>
<li>按鈕4</li>
<li>按鈕5</li>
</ul>
</div>
</div>
<div class="div1 show">
<div class="tab1">
tab1
</div>
<div class="tab1">
tab2
</div>
<div class="tab1">
tab3
</div>
<div class="tab1">
tab4
</div>
</div>
<div class="div1">
<div class="tab1 show">
tab5
</div>
<div class="tab1">
tab6
</div>
<div class="tab1">
tab7
</div>
<div class="tab1">
tab8
</div>
</div>
<div class="div1">
<div class="tab1 show">
tab9
</div>
<div class="tab1">
tab10
</div>
<div class="tab1">
tab11
</div>
<div class="tab1">
tab12
</div>
</div>
<div class="div1">
<div class="tab1 show">
tab13
</div>
<div class="tab1">
tab14
</div>
<div class="tab1">
tab15
</div>
<div class="tab1">
tab16
</div>
</div>
<div class="div1">
<div class="tab1 show">
tab17
</div>
<div class="tab1">
tab18
</div>
<div class="tab1">
tab19
</div>
<div class="tab1">
tab20
</div>
</div>
<script>
var headRli = document.querySelector(".head-right").querySelectorAll("li");
var headh = document.querySelector(".head");
var div1 = document.querySelectorAll(".div1");
for (let i = 0; i < headRli.length; i++) {
headRli[i].index = i;
headRli[i].onclick = function() {
for (let i = 0; i < headRli.length; i++) {
div1[i].style.display = "none";
}
div1[this.index].style.display = "block";
}
}
var twoHeight = headh.offsetHeight + div1.offsetHeight;
window.onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > twoHeight - 10) {
headh.classList.add("fixeds");
// div1.classList.add("fixeds1");
for (let i = 0; i < div1.length; i++) {
div1[i].classList.add("fixeds1");
}
} else {
headh.classList.remove("fixeds");
// div1.classList.remove("fixeds1");
for (let i = 0; i < div1.length; i++) {
div1[i].classList.remove("fixeds1");
}
}
}
</script>
</body>
</html>
上面是下拉滾動一定位置之后，head 和div1 兩塊固定吸頂在頂部，本身代碼沒什么問題，現在問題是點擊按鈕1~5 切換對應div1 之后，再下拉，吸頂效果就沒有了，難點就在于，div1 是一堆陣列都需要吸頂，切換之后就不能吸頂了，我現在用for回圈，弄的兩塊都不吸頂了，也沒報錯，請大神幫忙看看，
uj5u.com熱心網友回復：
var headRli = document.querySelector(".head-right").querySelectorAll("li");
var headh = document.querySelector(".head");
var div1 = document.querySelectorAll(".div1");
for (let i = 0; i < headRli.length; i++) {
headRli[i].index = i;
headRli[i].onclick = function() {
for (let i = 0; i < headRli.length; i++) {
div1[i].classList.remove("show");
}
div1[this.index].classList.add("show");
}
}
window.onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var twoHeight = headh.offsetHeight + document.querySelector(".div1.show").offsetHeight;
if (scrollTop > twoHeight - 10) {
headh.classList.add("fixeds");
// div1.classList.add("fixeds1");
for (let i = 0; i < div1.length; i++) {
div1[i].classList.add("fixeds1");
}
} else {
headh.classList.remove("fixeds");
// div1.classList.remove("fixeds1");
for (let i = 0; i < div1.length; i++) {
div1[i].classList.remove("fixeds1");
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/50958.html
標籤：JavaScript
上一篇：大佬快來救救我
下一篇：input輸入框消失問題