Navbar show after scroll with transition effect

Question

On web is basic horizontal navpanel with relative position, display block. After scroll more than 150px, i have javascript code to change his position to fixed. So panel appears for user... Now question:

How i can make (fade in or slide down) transition effect?

Here is fiddle: fiddle

Css:

#navigation-panel {
  transition: all 1s linear;
}

Js:

$(window).scroll(function () {
    console.log($(window).scrollTop());
    if($(window).scrollTop() > 150) {
        $('#navigation-panel').css('opacity', 1);
        $('#navigation-panel').css('position', 'fixed');
        $('#navigation-panel').css('opacity', 0);

    } else {
        $('#navigation-panel').css('position', 'relative');
    }
});

I was trying set in javascript (in css was transition: all 1s;):

• opacity 0;
• position: fixed;
• opacity 1

or alternatives like

• margin-top -50px (panel has 50px height);
• position: fixed;
• margin: 0;

But transition not working...

Any suggestions?

Answer 1

This should do the job:

$(window).scroll(function () {
  if($(window).scrollTop() > 150) {
    $('#navigation-panel').css('position', 'fixed');
    $('#navigation-panel').css('top', 0);
  } else {
  $('#navigation-panel').css('position', '');
    $('#navigation-panel').css('top', '-100%');
  }
});

.container {
  height: 1000px;
}


#navigation-panel {
  transition: all 0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navigation-panel">
  <ul id="main-menu">
    <li>
      <a href="#about-us" class="smooth-scroll">About us</a>
    </li>
    <li>
      <a href="#services" class="smooth-scroll">Services</a>
    </li>
    <li>
      <a href="#contact" class="smooth-scroll">Contact</a>
    </li>
  </ul>
</div>

<div class="container"></div>