javascript - Unnatural move for navigation menu -

i have problem navigation bar because using script fix position on top of site. base position navigation bar isn't on top, configured jump top if user scrolls website down. jump top unnatural , need make better that. want make behave more natural.

my scripts:

css:

#menu {     text-align: center;     height: 65px;     width: 100%;     z-index: 9999;     position: fixed; // here tried replace "relative" after change script dont work.     background-color: #0f1113;     border-bottom-width: 4px;     border-bottom-style: solid;     border-bottom-color: #63842d; }  .f-nav { // if change upper css position relative tried used here position: fixed or relative still dont work.     top:0;     -webkit-transition: height 0.3s;     -moz-transition: height 0.3s;     transition: height 0.3s; } 

javascript:

$("document").ready(function($){     var nav = $('#menu');      $(window).scroll(function () {         if ($(this).scrolltop() > 125) {             nav.addclass("f-nav");         } else {             nav.removeclass("f-nav");         }     }); }); 

this result work unnatural move first scroll navigation menu jump top.

i find , tried down script destroy header because dont know how configurate website , show navigation bar when scroll if scroll down website navigation bar hide down script.

css:

body {     margin: 0;     padding: 0; } .fxdhdr {     -webkit-transform: translatey(-60px);     -moz-transform: translatey(-60px);     -ms-transform: translatey(-60px);     -o-transform: translatey(-60px);     transform: translatey(-60px);     box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.28); } header {     height: 60px;     background: #d3145a;     position: fixed;     left: 0;     right: 0;     top: 0;     -webkit-transition: -webkit-transform 500ms ease;     -moz-transition: -moz-transform 500ms ease;     -ms-transition: -ms-transform 500ms ease;     -o-transition: -o-transformtransform 500ms ease;     transition: transform 500ms ease;     text-align:center;     line-height:60px; } 

javascript:

var lastscroll = 0; var scrolltostick = $("header").height();  $(window).on('scroll', function (evt) {     var newscroll = $(window).scrolltop();     $('header').toggleclass('fxdhdr', newscroll > lastscroll && newscroll > scrolltostick);     lastscroll = newscroll; }); 

so can me make more natural movement navigation bar because jump base position top first scroll horrible.

my website: here

few changes made

note: header height comes 160px , adding f-nav class after 125px may create glitch. give smooth transistion.

if ($(this).scrolltop() > 160) {             nav.addclass("f-nav");         } else {             nav.removeclass("f-nav");         } 

css changes

#menu {     text-align: center;     height: 65px;     width: 100%;     z-index: 9999;     position: relative;      background-color: #0f1113;     border-bottom-width: 4px;     border-bottom-style: solid;     border-bottom-color: #63842d; } 

make position relative , add position in f-nav class

.f-nav{ position: fixed !important;  }