javascript - Implementing One page web site's navigation -

i building 1 page web site has sticky navigation on it. have implemented everything, couldn't implement highlight navigation link when user scrolling mouse wheel or browser's scroll bar instead of using navigation. guess can implemented adding pre-styled class section closest top?

my second question how stop scrolling when user while page scrolling?

my site markup

<nav class="columns col-12 main-nav">         <ul>             <li><a href="#page1" class="selected">a link</a></li>             <li><a href="#page2">another link</a></li>             <li><a href="#page3">cat</a></li>             <li><a href="#page4">dog</a></li>         </ul> </nav>   <div class="container">     <section class="page" id="page1" data-stellar-background-ratio="1.75">      </section>               </div> <div class="container">     <section class="page" id="page2" data-stellar-background-ratio="1">      </section>               </div> 

and jquery navigation scrolling corresponding id

$(document).ready(function() {  $('a').click(function() {      var el = $(this).attr('href');     var elwrapped = $(el);      scrolltoele(elwrapped, 40);      return false;  });  function scrolltoele(element, navheight) {      var offset = element.offset();     var offsettop = offset.top;     var totalscroll = offsettop - navheight;      $('body,html').animate({         scrolltop : totalscroll,     }, 2000, 'easeincirc');  }   }); 

this how highlight navigation link when user clicks it.(i think not way this)

$(document).ready(function() {  $('nav a').click(function() {     $('nav .selected').removeclass('selected');     $(this).addclass('selected'); });    }); 

i sorry terrible english. hope understand question. question how highlight link when user scroll page without using navigation. , how stop scrolling when user click on page while page scrolling.

i found answer question different post. here if find usefull

jquery changing css on navigation when div # scrolls view

$(window).height() // returns viewport height $(document).height() // returns height of entire document $(window).scrolltop() // returns y position of document @ top of viewport    var toprange      = 200,  // measure top of viewport x pixels down     edgemargin    = 20,   // margin above top or margin end of page     animationtime = 1200, // time in milliseconds     contenttop = [];  $(document).ready(function(){   // stop animated scroll if user  $('html,body').bind('scroll mousedown dommousescroll mousewheel keyup', function(e){   if ( e.which > 0 || e.type == 'mousedown' || e.type == 'mousewheel' ){    $('html,body').stop();   }  });   // set content array of locations  $('#sidemenu').find('a').each(function(){   contenttop.push( $( $(this).attr('href') ).offset().top );  });   // animate menu scroll content   $('#sidemenu').find('a').click(function(){    var sel = this,        newtop = math.min( contenttop[ $('#sidemenu a').index( $(this) ) ], $(document).height() - $(window).height() ); // content top or top position if @ document bottom    $('html,body').stop().animate({ 'scrolltop' : newtop }, animationtime, function(){     window.location.hash = $(sel).attr('href');    });    return false;  });   // adjust side menu  $(window).scroll(function(){   var wintop = $(window).scrolltop(),       bodyht = $(document).height(),       vpht = $(window).height() + edgemargin;  // viewport height + margin   $.each( contenttop, function(i,loc){    if ( ( loc > wintop - edgemargin && ( loc < wintop + toprange || ( wintop + vpht ) >= bodyht ) ) ){     $('#sidemenu li')      .removeclass('selected')      .eq(i).addclass('selected');    }   });  });  }); 

and here

https://stackoverflow.com/posts/10144683/edit

// assign html, body variable... var $viewport = $('html, body');  // event trigger scroll animation (with nice ease - requires easing plugin )... $('#element').click(function() {     $viewport.animate({          scrolltop: scrolltarget // set scrolltarget desired position     }, 1700, "easeoutquint"); });  // stop animation if user scrolls. defaults on .stop() should fine $viewport.bind("scroll mousedown dommousescroll mousewheel keyup", function(e){     if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){          $viewport.stop().unbind('scroll mousedown dommousescroll mousewheel keyup'); // identifies scroll user action, stops animation, unbinds event straight after (optional)     } });