ScrollSpy Menu Menu | Techbirds

Posted on: September 4, 2017 /

Categories: Mobile Applications

Description: For long pages with lots of content, keeping the user oriented and knowing where within the page he/she is at all times can be challenging. DD ScrollSpy Menu solves this problem, by letting you create a menu whose menu items are automatically highlighted based on the portion of the page the user is currently viewing. As the user scrolls the page, the menu item that points to that section is highlighted (via the injection of a desired CSS class to style it). The script also works on scrollable DIVs within the page to spy on their scroll positions instead. DD ScrollSpy “spies” on the visitor’s position on the page, but for their benefit (and in turn yours)!

Download STYLE and SCRIPT and implement in your HTML Document. Both file are common for horizontal or vertical menu

ddscrollspydemo.css

ddscrollspy.js

Horizontal Scroll Spry Menu

Add the below code to the HEAD section of your page:

jQuery(function($){ // on document load $(‘#horizontalmenu’).ddscrollSpy({ // initialize first demo scrolltopoffset: -50 }) });

jQuery(function($){ // on document load

$(‘#horizontalmenu’).ddscrollSpy({ // initialize first demo

scrolltopoffset: -50

})

});

Add the below code to the BODY section of your page:

Section 1
Section 2
Section 3
Section 4
Section 5

This is section 1

This is section 2

This is section 3

This is section 4

This is section 5

Section 1
Section 2
Section 3
Section 4
Section 5