jquery - scroll triggered animation extremely delayed -

using jquery, trying make navbar similar this wordpress plugin: navbar hidden/offscreen when page loaded, slides down fixed position when scroll position reached, , slides offscreen position when user scrolls top.

i managed it, however, timing wrong: can take few seconds after scrolling until menu bar appears. , it's worse when scrolling up: @ first thought doesn't work @ all, then, after 15 seconds or more, moves up.

here's code:

$(window).scroll(function() {    var scrollposition = $(window).scrolltop();    if (scrollposition > 100) {      $("#main_navigation").animate({        top: "0px"      }, 600);    };    if (scrollposition < 100) {      $("#main_navigation").animate({        top: "-82px"      }, 400);    };  });

html,  body {    margin: 0;    height: 100%;  }  .content {    height: 200%;    background: #fda;    padding: 5em 3em;  }    nav#main_navigation {    position: fixed;    z-index: 1;    top: -82px;    width: 100%;    background: #fff;    height: 54px;    border-bottom: 1px solid #eee;  }    .logo {    display: inline-block;    position: relative;    top: 50%;    left: 2em;    margin: 0;    width: 36px;    transform: translatey(-50%);  }    nav#main_navigation ul {    position: relative;    top: 50%;    margin: 0;    transform: translatey(-50%);    display: inline-block;    list-style: none;    float: right;    margin-right: 0.8em;  }    nav#main_navigation li {    display: inline-block;    margin-right: 1.2em;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <nav id="main_navigation">    <div class="logo">(logo)</div>    <ul>      <li><a href="#">welcome</a></li>      <li><a href="#">about</a></li>      <li><a href="#">contact</a></li>    </ul>  </nav>  <div class="content">    <p>this content. scroll down @ least 100px make navbar appear. should take 0.6 seconds, takes longer.</p>    <p>then scroll make navbar disappear again. should take 0.4 seconds...</p>  </div>

i suppose might have many scroll events having handled, don't know how avoid or filter that. or there reason?

i figured out: there a lot of scroll events, , there animation triggered each scroll event, handle browser. takes long time until processed , animation performed, causing long delay.

so looked way have down- , up-sliding animations triggered once before other 1 triggered. used variable (status_1), default value "closed". when scroll value goes above 100, first (down-sliding) animation triggered if status_1 "closed". it's triggered, status_1 set "open", won't triggered again long scroll value above 100. same second if-condition , animation:

var status_1 = "closed";  $(window).scroll(function() {    var scrollposition = $(this).scrolltop();    if ((scrollposition > 100) && (status_1 == "closed")) {      $('#main_navigation').animate({        top: '0px'      }, 600);      status_1 = "open";    };    if ((scrollposition < 100) && (status_1 == "open")) {      $('#main_navigation').animate({        top: '-82px'      }, 400);      status_1 = "closed";    };  });

html,  body {    margin: 0;    height: 100%;  }    .content {    height: 200%;    background: #fda;    padding: 5em 3em;  }    nav#main_navigation {    position: fixed;    z-index: 1;    top: -82px;    width: 100%;    background: #fff;    height: 54px;    border-bottom: 1px solid #eee;  }    .logo {    display: inline-block;    position: relative;    top: 50%;    left: 2em;    margin: 0;    width: 36px;    transform: translatey(-50%);  }    nav#main_navigation ul {    position: relative;    top: 50%;    margin: 0;    transform: translatey(-50%);    display: inline-block;    list-style: none;    float: right;    margin-right: 0.8em;  }    nav#main_navigation li {    display: inline-block;    margin-right: 1.2em;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <nav id="main_navigation">    <div class="logo">(logo)</div>    <ul>      <li><a href="#">welcome</a></li>      <li><a href="#">about</a></li>      <li><a href="#">contact</a></li>    </ul>  </nav>  <div class="content">    <p>this content. scroll down @ least 100px make navbar appear. should take 0.6 seconds.</p>    <p>then scroll make navbar disappear again. should take 0.4 seconds...</p>  </div>