title: How to make Bootstrap 3 navbar affix move smoothly?
body: <p>If you run the code snippet, it appears that the affix only moves down smoothly and does not move up smoothly, how do I achieve that? I wonder if there is something wrong with the position element, but seems I could not make it work well.  </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;Bootstrap Example&lt;/title&gt;
   &lt;meta charset="utf-8"&gt;
   &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
   &lt;link rel="stylesheet"      href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
   &lt;script    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;        &lt;/script&gt;
   &lt;script     src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;   &lt;/script&gt;
  
   &lt;style&gt;
     .affix {
        top: 0;
        width: 100%;
        -webkit-transition: all 0.9s ease-in-out;
        transition: all 0.9s ease-in-out;
           }
      .affix-top {
         position: static;
         top: -35px;
          }
  
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
     &lt;nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="190"&gt;
       &lt;ul class="nav navbar-nav"&gt;
        &lt;li class="active"&gt;&lt;a href="#"&gt;Basic Topnav&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
     &lt;/nav&gt;
      &lt;div class="container-fluid" style="height:1000px"&gt;
        &lt;h1&gt;Some text to enable scrolling&lt;/h1&gt;
        &lt;h1&gt;Some text to enable scrolling&lt;/h1&gt;
        &lt;h1&gt;Some text to enable scrolling&lt;/h1&gt;
        &lt;h1&gt;Some text to enable scrolling&lt;/h1&gt;
      &lt;/div&gt;
  
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>