If you want to create a vertical menu that scrolls through the items as you scrolls through the page
HTML:
<nav id="leftMenu"> <ul class="sidebar-nav nav leftMenuItems padding-0"> <li><h4>Navigation Menu</h4></li> <li class="active"> <a id="menuItem202" href="#formSectionInstance_202">Menu Item 1</a> </li> <li><a id="menuItem203" href="#formSectionInstance_203">Menu Item 2<</a></li> <li><a id="menuItem204" href="#formSectionInstance_204">Menu Item 3<</a></li> <li><a id="menuItem208" href="#formSectionInstance_208">Menu Item 4<</a></li> <li><a id="menuItem206" href="#formSectionInstance_206">Menu Item 5<</a></li> <li><a id="menuItem207" href="#formSectionInstance_207_documentUpload">Menu Item 6<</a></li> </ul> </nav>
Javascript:
function BindEventsToFormMenuItems() { // Cache selectors var lastId, topMenu = $("#navbar"), leftMenu = $("#leftMenu"), topMenuHeight = topMenu.outerHeight() + 15, // All list items menuItems = leftMenu.find("a"), // Anchors corresponding to menu items scrollItems = menuItems.map(function () { var item = $($(this).attr("href")); if (item.length) { return item; } }); // Bind click handler to menu items // so we can get a fancy scroll animation menuItems.each(function (index) { $(this).click(function (e) { var href = $(this).attr("href"), offsetTop = href === "#" ? 0 : $(href).offset().top - topMenuHeight + 1; $('html, body').stop().animate({ scrollTop: offsetTop }, 300); e.preventDefault(); if ($('#menu-toggle').is(':visible')) { $("#menu-toggle").trigger("click"); } menuItems.parent().removeClass("active"); $(this).parent().addClass("active"); }); }); // Bind to scroll $(window).scroll(function () { // Get container scroll position var fromTop = $(this).scrollTop() + topMenuHeight + 50; // Get id of current scroll item var cur = scrollItems.map(function () { if ($(this).offset().top < fromTop) return this; }); // Get the id of the current element cur = cur[cur.length - 1]; var id = cur && cur.length ? cur[0].id : ""; if (lastId !== id) { lastId = id; // Set/remove active class menuItems .parent().removeClass("active") .end().filter("[href='#" + id + "']").parent().addClass("active"); } }); }