Functional description:
Display elevator navigation when the scrollbar slides to a position;
When the user scrolls the scrollbar, keep the selected elevator navigation status consistent with the area that the elevator is currently scrolling to;
When the user clicks on the elevator navigation, the scrollbar scrolls to the area corresponding to the clicked navigation
Dead work:
First import the jQuery file and your own js file into your html. Place the jq file on top of it
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
HTML code:
1 <body>
2 <div class="slider-bar">
3 <ul>
4 <li>Head area</li>
5 <li class="current">Navigation Area</li>
6 <li>Part One</li>
7 <li>Part Two</li>
8 <li>Part Three</li>
9 <li>Bottom Zone</li>
10 </ul>
11 </div>
12 <div class="header w">Head area</div>
13 <div class="banner w">banner region</div>
14 <div class="main w">Body Part 1</div>
15 <div class="main w">Body Part 2</div>
16 <div class="main w">Body Part 2</div>
17 <div class="footer w">footer Part</div>
18 </body>
1 <style>
2 * {
3 margin: 0;
4 padding: 0;
5 }
6 li {
7 list-style: none;
8 }
9 .slider-bar {
10 display: none;
11 position: fixed;
12 left: 47%;
13 top: 160px;
14 margin-left: 600px;
15 width: 45px;
16 height: 305px;
17 background-color: pink;
18 cursor: pointer;
19 overflow: hidden;
20 }
21 .slider-bar li {
22 font-size: 15px;
23 padding: 5px;
24 border-bottom: 1px solid #fff;
25 }
26 .slider-bar li:hover {
27 background-color: red;
28 color: #fff;
29 }
30 .current {
31 background-color: red;
32 color: #fff;
33 }
34 .w {
35 width: 1100px;
36 margin: 10px auto;
37 }
38 .header {
39 height: 150px;
40 background-color: purple;
41 }
42 .banner {
43 height: 300px;
44 background-color: skyblue;
45 }
46 .main {
47 height: 500px;
48 background-color: yellowgreen;
49 }
50 .footer {
51 height: 300px;
52 background-color: orange;
53 }
54 </style>
CSS Style Code
1. Display elevator navigation when the user slides into the banner area.Encapsulated as a function toggleTool()
1 function toggleTool() {
2 if($(document).scrollTop() > $(".banner").offset().top - 1) {
3 $(".slider-bar").fadeIn(); // fadeIn()Fade in (display)
4 } else {
5 $(".slider-bar").fadeOut(); // fadeOut()Fade (Hide)
6 }
7 }
2. each() traverses all modules to keep the selected elevator navigation status consistent with the corresponding module area.Wrapped into a function eachTool()
If the height of scrolling up ($(document).scrollTop()) is greater than the distance of the module from the top of the document ($(ele).offset().top), you scroll up to the corresponding module.Add the current class (checked state) to the corresponding elevator navigation and remove the current class from the other navigation;
But if the footer part is too short, the corresponding navigation of the footer will never be selected, so write another judgment to determine whether to scroll to the bottom.
When (Roll Up Height) + (Height of Current Window) >= (Height of Whole Document), the note scrolls to the bottom, adds current to footer and removes other current
1 function eachTool() {
2 if(flag) { // flag mutex executes the code inside when it is true
3 $(".w").each(function(i, ele) { // i Is the index, ele Is Traversal Object
4 // Minus 1 is to solve a small problem bug
5 if($(document).scrollTop() > $(ele).offset().top - 1) {
6 // Add to corresponding navigation current Class, and removes other navigational current Class ( li In this class, do not write current All right)
7 $(".slider-bar li").eq(i).addClass("current").siblings().removeClass();
8 } else if($(window).scrollTop() + $(window).height() >= $(document).height() - 1) {
9 // When the page rolls to the bottom, give footer Corresponding navigation additions current class
10 var footIndex = $(".slider-bar li").length - 1;
11 $(".slider-bar li").eq(footIndex).addClass("current").siblings().removeClass();
12 }
13 })
14 }
15 }
Bind a scroll event to a window object and call the two functions above when the page scrolls.
Of course, to prevent the navigation bar from displaying incorrectly when the user refreshes the page, we call it once when the page is loaded
1 toggleTool();
2 eachTool();
3 $(window).scroll(function(e) {
4 toggleTool();
5 eachTool();
6 })
3. The user clicks on the navigation to let the scrollbar roll to the corresponding area;
When the user clicks on the navigation, the page scrolls, which triggers the page scrolling event and executes the background selection (checked state) in eachTool(), so after clicking on the navigation, let the flag change to false, forbidding the execution of the content in eachTool();
Get the index of the LIS currently c li cked by the user, which corresponds to the index of the corresponding module. Knowing which module can calculate the distance of this module from the top of the document.Call animate() to scroll the scrollbar to this height;
Change flag to true after animation, otherwise flag will always be false and you will not be able to execute the contents of eachTool()
1 $(".slider-bar li").click(function(e) {
2 flag = false;
3 // Assign the height of the module from the top to current
4 var current = $(".w").eq($(this).index()).offset().top; // $(".w").eq(index) Selector, select which element
5 $("html").stop().animate({ // Call animation before stop()Stop other incomplete animations (solve queuing problems)
6 scrollTop: current
7 }, function() { // Callback function, executed after animation is complete
8 flag = true;
9 })
10 // Click Add current Class (checked state) and remove sibling nodes current class
11 $(this).addClass("current").siblings().removeClass();
12 })
Complete JavaScript code:
1 $(function() {
2 // Throttle valve (mutex) is used to solve a small bug(Page scrolling triggers when the user clicks on the navigation bar eachTool()Content in, does not need to trigger when we click eachTool())
3 var flag = true;
4 // When the user slides to banner Area, showing elevator navigation.Encapsulate into a function toggleTool()
5 function toggleTool() {
6 if($(document).scrollTop() > $(".banner").offset().top - 1) {
7 $(".slider-bar").fadeIn(); // fadeIn()Fade in (display)
8 } else {
9 $(".slider-bar").fadeOut(); // fadeOut()Fade (Hide)
10 }
11 }
12 // each()Traverse all modules to keep the elevator navigation consistent with the corresponding modules.Encapsulate into a function eachTool()
13 function eachTool() {
14 if(flag) {
15 $(".w").each(function(i, ele) { // i Is the index, ele Is Traversal Object
16 // If the height of the scroll up is greater than the distance of the module from the top of the document, the corresponding module is scrolled (minus 1 to solve a small problem) bug)
17 if($(document).scrollTop() > $(ele).offset().top - 1) {
18 // Add to corresponding elevator navigation current Class, and remove brothers current Class ( li In this class, do not write current All right)
19 $(".slider-bar li").eq(i).addClass("current").siblings().removeClass();
20 // If footer Part too short, that footer The corresponding navigation will never light up, so write another judgment↓Determine whether to scroll to the bottom
21 } else if($(window).scrollTop() + $(window).height() >= $(document).height() - 1) {
22 // When the page rolls to the bottom, give footer Corresponding navigation additions current class
23 var footIndex = $(".slider-bar li").length - 1;
24 $(".slider-bar li").eq(footIndex).addClass("current").siblings().removeClass();
25 }
26 })
27 }
28 }
29 // Call two functions first to prevent users from refreshing the page and not displaying it
30 toggleTool();
31 eachTool();
32 $(window).scroll(function(e) {
33 toggleTool();
34 eachTool();
35 })
36
37 // User clicks navigation to scroll bar to corresponding module
38 $(".slider-bar li").click(function(e) {
39 // click li The page also scrolls, which triggers the page scroll event, which executes eachTool()Background selection in
40 // So Click li Assignment after flag by false，Prohibit execution eachTool()Contents in
41 flag = false;
42 // $(this).index()Get the user's current Click li Index of the corresponding module
43 // Get the corresponding module index to calculate the height of the module from the top and assign it to current
44 var current = $(".w").eq($(this).index()).offset().top; // $(".w").eq(index) Selector, select which element
45 $("html").stop().animate({ // Call animation before stop()Stop other incomplete animations (solve queuing problems)
46 scrollTop: current
47 }, function() { // Callback function, executed after animation
48 flag = true; // Give Way flag Become true，otherwise flag Always false，Unable to execute eachTool()Contents in
49 })
50 // Click Add current Class and removes sibling nodes current class
51 $(this).addClass("current").siblings().removeClass();
52 })
53 })