title: FadeOut optinon in css
body: <p>I have been working on site where when you get to a certain point in site, content fades in, and when I'm back above that point, it needs to fade out. I have worked my way to fade in, but when I scroll back up, it just disapperes without fade out. Can you please look at my code and tell me what did I do wrong?
  HTML :</p>
  
  <pre><code>&lt;body&gt;
      &lt;img src="pictures/placeholder1.jpg" id="first_image"&gt;
      &lt;header&gt;
        &lt;img src="pictures/Norsein_logo_3.png"&gt;
        &lt;nav&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;PROIZVODI&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;GALERIJA&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;O NAMA&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;TIM&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;KONTAKT&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
      &lt;/header&gt;
      &lt;main class="maintext"&gt;
      &lt;/main&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>header {
    width : 100%;
    height: 15%;
    font-weight: bold;
    position:fixed;
    font-size: 14px;
    z-index: 150;
  }
  header img{
      float: left;
      margin-left: 12%;
      height: 80%;
      margin-top: 5px;
      visibility: hidden;
      z-index: 150;
  }
  
  main {
    height:2000px;
    width:100%;
    position:relative;
    top: 100vh;
    background-image: url("pictures/background2.jpg");
    background-repeat: repeat-y;
    background-size: contain;
    z-index: 100;
  }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>&lt;script src="%jQueryCDN"&gt;&lt;/script&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
    $(window).scroll(function() {
    if ($(this).scrollTop() &gt;= 500) {
        $("header").css("background", "rgba(0, 0, 0, 0.5)").fadeIn(1000);
        $("header img").css('visibility','visible').fadeIn(1000);
    } else {
      $("header").css("background", "transparent").fadeOut(1000);
      $("header img").css('visibility','hidden').fadeOut(1000);
    }
  });
      &lt;/script&gt;
  </code></pre>