Click to scroll menu

click-to-scroll.js

      var navHeight = 0; //use valut for sticky menu height
      
			$(document).on("scroll", onScroll);

			$('#main-menu ul a[href*="#"]:not([href="#"]), #sidr a[href*="#"]:not([href="#"]').on('click', function (e) {

				if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

					e.preventDefault();

					$(document).off("scroll");

					$('a').each(function () {
						$(this).removeClass('active');
					});


					$(this).addClass('active');


					var target = this.hash;

					var $target = $(target);

					$('html, body').stop().animate({
						'scrollTop': $target.offset().top - navHeight
					}, 500, 'swing', function () {
						$(document).on("scroll", onScroll);
					});

				}
			});

			function onScroll(event){

				var scrollPosition = $(document).scrollTop() + navHeight

				$('#main-menu ul a[href*="#"]:not([href="#"])').each(function () {

					if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

						var currentLink = $(this);

						var refElement = $(this.hash);

						if (refElement.offset().top <= scrollPosition && refElement.offset().top + refElement.outerHeight() > scrollPosition) {
							$('#main-menu ul li a').removeClass("active");
							currentLink.addClass("active");
						}
						else{
							currentLink.removeClass("active");
						}
					}

				});
			}