Fade in/Fade out navigation bar

I'm trying to set my navigation bar to remain fixed and fade to 0.8 opacity when i scroll down and return to his normal position and opacity when i scroll back up.

my jquery code is :

jQuery(document).ready(function(){

    var navOffset = jQuery("nav").offset().top;

    jQuery(window).scroll(function(){

        var scrollPos = jQuery(window).scrollTop();

        if(scrollPos > navOffset) {
            jQuery("nav").addClass("fixed");
            jQuery("nav").fadeTo(1500,0.5);
        } else {
            jQuery("nav").removeClass("fixed");
            jQuery("nav").fadeTo(1500,1);

        }
    });
});

and my css code is :

.fixed {

    position:fixed;

    top:0;
}

It fades out when i scroll down but doesnt return to his original opacity when i scroll back up.I'm new to jQuery.

Solution

I think the problem is that you're setting the fadeTo function on every firing of the scroll event. Thus, when you scroll down, you're adding many "fade out" calls to the animation effects queue. When you scroll back up, all of the "fade out" effects (each of which takes 1.5 seconds) have to finish before the first "fade in" call takes place.

You can fix this by adding a call to jQuery's .stop(true) so that each scroll event clears the animation queue:

jQuery(document).ready(function() {

  var navOffset = jQuery("nav").offset().top;

  jQuery(window).scroll(function() {

    var scrollPos = jQuery(window).scrollTop();
    jQuery("nav").stop(true);

    if (scrollPos > navOffset) {
      jQuery("nav").addClass("fixed");
      jQuery("nav").fadeTo(1500, 0.5);

    } else {
      jQuery("nav").removeClass("fixed");
      jQuery("nav").fadeTo(1500, 1.0);
    }
  });
});

body {
  height: 4096px;
  padding-top: 32px;
}
nav {
  height: 128px;
  width: 100%;
  border: 1px solid black;
  background-color: #00aa00;
}
.fixed {
  position: fixed;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>so</title>
  <meta charset="UTF-8">

</head>

<body>

  <nav></nav>

</body>

</html>

Note that this means the fadeTo animation won't take place until the user stops scrolling.