title: How to add sliding-effect transition to an element which appears (by adding 'position:fixed' at runtime) while scrolling the window?
body: <p>In this SSCCE, the class <code>scroll-header</code>, which has <code>position:fixed;</code>, is applied to <code>div.header</code> at runtime. I want it to have the effect of sliding down from the top edge of the screen when it appears. How can I do that?</p>
  
  <p>I have tried applying <code>transition:position 1s ease 0s;</code> on <code>.header</code> but it does not seem to work.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    console.log("script.js is detected"); //check
  
    $(window).scroll(function() {
      console.log("window onscroll being called."); //check
      if ($("div.view").visible(true)) {
        console.log("YES if ( $(\"div.view\").visible(true) )"); //check
        $(".header").removeClass("scroll-header");
      } else {
        console.log("NO if ( $(\"div.view\").visible(true) )"); //check
        $(".header").addClass("scroll-header");
      }
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.view {
    height: 500px;
    width: 100%;
    background-color: crimson;
  }
  .second {
    height: 2500px;
    width: 100%;
    background-color: purple;
  }
  .header {
    position: absolute;
    width: 100%;
    height: 100px;
    background-color: cyan;
    top: 0px;
    left: 0px;
    transition:position 1s ease 0s;
  }
  .scroll-header {
    background-color: yellow;
    position: fixed;
    width: 100%;
    height: 70px;
    background-color: yellow;
  }
  * {
    border: 0px;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://cdn.jsdelivr.net/jquery.visible/1.1.0/jquery.visible.min.js"&gt;&lt;/script&gt;
  &lt;div class="view"&gt;.&lt;/div&gt;
  &lt;div class="header"&gt;.&lt;/div&gt;
  &lt;div class="second"&gt;.&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>