Shulou(Shulou.com)06/03 Report--

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") .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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.