Make for a long time, there is no way, a great god, please help to see, on what issues-CodePudding

Home > front end > Make for a long time, there is no way, a great god, please help to see, on what issues

Make for a long time, there is no way, a great god, please help to see, on what issues

Time：09-15

<meta HTTP - equiv="content-type" Content="text/HTML. Charset=utf-8 "/& gt;
Demo

<style>
* {
padding: 0;
margin: 0;
}

Body {
Width: 98%;
Height: 15000 px;
margin: 0 auto;
}

The head {
width: 100%;
Height: 70 px;
Background: black;
}

. Head. The head - right {
float: right;
width: 50%;
height: 30px;
The line - height: 30 px;
Margin - top: 20 px;
}

. Head. The head - right ul li {
float: left;
Width: 20%;
Color: # FFF.
}

The tab1 {
Width: 25%;
float: left;
Background: # CCC;
Height: 36 px;
}

The div1 {
Height: 36 px;
width: 100%;
display: none;
}

. The div1. Show {
display: block;
}

. Fixeds {
position: fixed;
top: 0;
}

. Fixeds1 {
position: fixed;
Top: 70 px;
}
</style>

<body>

Button 2 & lt;/li>
Button 3 & lt;/li>
Button 4 & lt;/li>
Button 5 & lt;/li>

Tab1

Tab2

Tab3

Tab4,

Tab5

Tab6

Tab7

Tab8

Tab9

Tab10

Tab11

Tab12

Tab13

Tab14

Tab15

Tab16

Tab17

Tab18

Tab19

Tab20

<script>
Var headRli=document. QuerySelector (" head - the right "). The querySelectorAll (" li ");
Var headh=document. QuerySelector (" head ");
Var div1=document. QuerySelectorAll (" div1 ");

For (the let I=0; i HeadRli [I] index=I;
HeadRli [I] onclick=function () {
For (the let I=0; i Div1 [I]. Style. The display="none";
}
Div1 [this index]. Style. The display="block";
}
}

Var twoHeight=headh. OffsetHeight + div1. OffsetHeight;

Window. The onscroll=function () {
Var scrollTop=document. DocumentElement. ScrollTop | | document. The body. The scrollTop;

If (scrollTop & gt; TwoHeight - 10) {
Headh. ClassList. Add (" fixeds ");
//div1. ClassList. Add (" fixeds1 ");
For (the let I=0; i Div1 [I] classList. Add (" fixeds1 ");
}
} else {
Headh. ClassList. Remove (" fixeds ");
//div1. ClassList. Remove (" fixeds1 ");
For (the let I=0; i Div1 [I] classList. Remove (" fixeds1 ");
}
}
}
</script>

Above is the drop-down rolling after certain position, the head and the div1 two fixed at the top, suction a top code will be a problem in itself, now the problem is click on the button switch 1 ~ 5 corresponding div1, after again the drop-down, top absorption effect, the difficulty is that div1 is a pile of array need to suck, after the switch will not be able to attract top, I now use a for loop, two don't get the suction a top, also do not complain, ask god to help see,

Page link：https//www.codepudding.com/frontend/1078.html

Prev:Front-end engineers, please use the fast full stack cloud open platform to develop a small applicati

Next:Web front end

Tags：

Related

Links：
CodePudding