jquery sticky-nav-bar behaving like a css3 animation, how to stop it?

Question

live website is on this address: www.calimousineservice.com Hi i am making this simple website and the i tried to include a sticky nav on top. everything works as expected so far the only problem is that when i scroll the Jquery acts like a slide-in-animation rather than just sticking to the top of the window right away. also since i attached this my image slider has some kind of lagging when sliding the images. i have all my script and file.js(s) attached at the bottom of the html and here are my javascript for sticky nav in addition to its uploaded js files:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle2.min.js"></script>

<script>
    function makeSticky() {
        var myWindow = $(window), 
        myHeader = $(".navigation");

        myWindow.scroll(function() {
            if (myWindow.scrollTop() == 0 ) {
                myHeader.removeClass("sticky-nav");
            } else {
                myHeader.addClass("sticky-nav");
            }
        });
    }
    $( function() {
        makeSticky(); 
    });
</script>

there is another script that will pop up a image on the right of the nav bar when scrolled down:

<script>
    function hideImg() {
        var myWindow = $(window),
        container= $(".nhide");

        myWindow.scroll(function() {
            if (myWindow.scrollTop() == 0 ) {
                container.addClass("nhide");
            } else{
                container.removeClass("nhide");
            }   
        });  
    }

    $( function() {
        hideImg(); 
    });
</script>

please scroll down and up few times to get the glimpse of what i am talking about here. the nav bar, when scrolled, acts like a slide-in-animation(like a css3 animation) i want to remove that. and also the problem with my slider. thank you in advance please let me know if i need to provide more of the codes.

Answer 1

It's fell under the slideshow. To fix it, give your navbar z-index property with value more than the slideshow's z-index.

I guess that z-index:999 can fix it!

UPDATE:

Set your navbar's transition property to 0 . Because there seem that there are global selector that is used to set the transition.

Make sure that you are using the most specific selector to prevent other element's rules ruling your navbar.

Example:

#yournavbar_container .navbar {
  transition: 0s;
}

Or set all values to default:

#yournavbar_container .navbar {
  transition: all 0s ease 0s;
}

You can also use this:

#yournavbar_container .navbar {
  transition:none;
  transition-delay:0s;
  transition-duration:0s;
  transition-property:none;
  transition-timing-function:ease;
}