Home > front end >  JQuery elevator navigation
JQuery elevator navigation

Time:12-14

At the end of the scroll wheel when how delimit click can make navigation with different color, help to see I am a bit stupid, don't thinking wrong?


$(function () {
Var fa=true;
Var top=$(' actv '). The offset (). The top;
Var top1=$(' con '). The offset (). The top;
$(' body, HTML). Stop (). The animate ({
ScrollTop: 0
})
Togg ();

The function togg () {
If ($(document). ScrollTop () & gt; Top1)={
$(' daohangl '). SlideDown (100);
} else {
$(' daohangl '). SlideUp (300);
}
If ($(document). ScrollTop () & gt;={top)
$(' dianti '). FadeIn (100);
} else {
$(' dianti '). FadeOut (300);
}
}
//scroll to make navigation inside every small plates of different colors
$(window). Scroll (function () {
Togg ();
If (fa) {
$(' eq '). Each (function (I, e) {
If ($(document). ScrollTop () & gt;=$(e). Offset (). The top) {



}
})
}
})
//click the return to the top
$(' BCTL ') on (' click ', function () {
$(' body, HTML). Stop (). The animate ({
ScrollTop: 0
});
})
//click to jump to different plate
$(' diant1 ') on (' click ', function () {
Fa=false;
Var index=$(this). The index ();
Var cont=$(' eq '). The eq (index). Offset (). The top;
$(' body, HTML). Stop (). The animate ({
ScrollTop: cont + - 50,
}, function () {
Fa=true;
})
Var as=[' # DC143C ', '# FF8C00', 'deeppink', 'burlywood', 'goldenrod', '# FF0036]
$(' diant1 '). Eq (index). Each (function (I, d) {
I=index;
$(d). The CSS (" backgroundColor ", as [I])
$(d). Siblings (). The CSS ({
BackgroundColor: 'black',
Opacity: 0.6
})
})
})
//delimit make every small plate different colors
$(' diant1 '). Hover (function () {
Var index=$(this). The index ()
Var as=[' # DC143C ', '# FF8C00', 'deeppink', 'burlywood', 'goldenrod', '# FF0036]
$(' diant1 '). Eq (index). Each (function (I, d) {
I=index;
$(d). The CSS (" backgroundColor ", as [I])
$(d). Siblings (). The CSS ({
BackgroundColor: 'black',
Opacity: 0.6
})
})
})
})

CodePudding user response:

No part of the HTML code

CodePudding user response:

reference 1st floor bath _ fire phoenix reply:
no part of the HTML code that


That probably to simplify it what I mean

1

2

3

4

5

6












The dianti {
Width: 35 px;
Height: 369 px;
Position: fixed;
Left: 13%;
Top: 40%;
}
. Diant1 {
Width: 30 px;
height: 30px;
Padding: 3 px;
font-size: 12px;
text-align: center;
overflow: hidden;
Background - color: # 000;
Opacity: 0.6;
color: #fff;
Margin - the top: 1 px;
cursor: pointer;
}
. BCTL {
Width: 36 px;
Height: 36 px;
color: #fff;
cursor: pointer;
Margin - the top: 1 px;
Background - color: # CCC;
overflow: hidden;
The font - size: 13 px;
text-align: center;
Display: table - cell;
Vertical - align: middle;
}
. FTMT {
Width: 1180 px;
Height: 668 px;
overflow: hidden;
Margin: auto;
margin-bottom: 10px;
The font - size: 30 px;
The font - weight: 900;
text-align: center;
}
. Kuwan {
The font - size: 30 px;
The font - weight: 900;
text-align: center;
Width: 1180 px;
Height: 648 px;
margin: 0 auto;
margin-bottom: 10px;
}
The BTC {
The font - size: 30 px;
The font - weight: 900;
text-align: center;
Width: 1180 px;
Height: 319 px;
Margin: auto;
}
  • Related