How to implement scrolling monitoring and additional navigation in Jquery

This article is about how Jquery implements scrolling monitoring and additional navigation. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Navigation ideas:

Sets the class for nav navigation.

Sets the index value.

Click on the navigation content, and the index of the navigation corresponds to the index of the content.

Click on the navigation bar and slide the content for a distance.

Monitoring:

1. When you slide the content document, the index value changes.

two。 The content of the index corresponding to navigation is highlighted.

Here is the code

$(document) .ready (function () {

$(".nav _ scroll_a") .each (function () {/ / the class corresponding to navigation)

$(this) .click (function () {/ / Click the navigation bar content

Var index = $(this) .index () / / get the index value index

/ / find the index value of the corresponding content, and slide a certain height

Window.scrollTo ('yearly, $(".nav _ scroll:nth-of-type (" + (index + 1) + ")") .offset () .top-100)

RemoveClass ("active") / / clears the activation attributes for all navigation

$(this) .addClass ("active") / / Lights the navigation being clicked

});

});

});

$(document) .ready (function () {

$(window) .slide (function () {/ / sliding event

For (var I = 0; I

< $(".nav_scroll_a").length; i++) { //遍历每一次的导航事件 if($(window).scrollTop() >

$(".nav _ scroll") .eq (I) .offset () .top-130) {/ / content bar slide

$(".nav _ scroll_a") .removeClass ("active")

$(".nav _ scroll_a") .eq (I) .addClass ("active")

}

}

});

});

Thank you for reading! This is the end of the article on "how to achieve rolling monitoring and additional navigation in Jquery". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!