jquery - Make menu flags slide in a fixed menu while I scroll up & down a page -

my demo

the above link responsive design layout single page fixed menu.

i want make menu flags slide in fixed menu. example, @ first clicked section 2 menu button. menu flags highlight section 2. secondly, menu flags can move section 2 section 1 automatically while use mouse scrolling section 1. how can that?

js code

var menucontainer = $('header').height();  function scrolltoanchor(anchorname) {   var atag = $("div[name='" + anchorname + "']");   $('html,body').animate({     scrolltop: atag.offset().top - menucontainer   }, 'slow');   console.log(anchorname); } $(window).on('resize', function(event) {    menucontainer = $('header').height(); }); 

css code

/* header - navigation */ #subnav {     height: 100%;     margin-right: auto;     width: 100%;     background-color: #ffffff;     font-size: 120%;  } #submenu ul {     padding: 0;     margin-top: 4px;     margin-right: auto;     margin-left: 0%;     margin-bottom: 0;     width: 650px; } #submenu li {     float: left; } #submenu li {     display: inline-block;     padding: 10px 20px;     text-align: center;     text-decoration: none;     font-weight: bold;     border-right: 1px solid #294c52;     box-sizing: border-box;     -moz-box-sizing: border-box;     -webkit-box-sizing: border-box; } .submenu-active {     background-color: #294c52;     color: #ffffff;  } {   color: #294c52; } 

you can add handler scroll event check current scroll position , highlight appropriate menu section.

function menuhighlight() {     /* compare content offset top width $(document).scrolltop()         , highlight needed section of menu */ } $(window).on('scroll', menuhighlight); 

also need add check resize event handler

$(window).on('resize', menuhighlight); 

after can remove old method of menu highlighting, highlight automatically now.

i hope understood problem correctly , can you.