title: How can i perform a smooth css transition to my sticky bar?
body: <p>I need to make this sticky bar, not just stick to top, but with CSS transition, I mean smoothly because it's kinda rough for now, any hints will do great !
  This website contains the exact animation I want <a href="https://css-tricks.com/" rel="nofollow">https://css-tricks.com/</a></p>
  
  <p>This is the CSS code </p>
  
  <pre><code>#bar {  
      display:inline-block;
      width: 100%;
      height: 50px;
      max-height:50px;
      background-color: #595959;
      box-shadow: 0px 2px 2px #888888;
  }
  .bar-fixed {
      top: 0;
      z-index: 9999;
      position: fixed;
      width: 100%;
  }
  </code></pre>
  
  <p>Here is the jQuery that performs the class adding </p>
  
  <pre><code>$(document).ready(function() {
  
      $(window).scroll(function () {
          console.log($(window).scrollTop());
          if ($(window).scrollTop() &gt; 59) {
              $('#bar').addClass('bar-fixed');
          }
          if ($(window).scrollTop() &lt; 60) {
              $('#bar').removeClass('bar-fixed');
          }
       });
  });
  </code></pre>
  
  <p>I can provide the HTML if needed...
  I tried to do this with a CSS transition this way, but it didn't work,and it is logic, because class isn't a property,so I think it can be done with jQuery, but I'm not sure.a tutorial or course, will be great, so I can pick and learn my own choices, thank you.</p>