title: Trying to get div to stick at the top while scrolling a page. It is staying at the top but the CSS is getting deformed
body: <p>I have a type of search box div for my site that I want to stick to the top when the user scrolls down to look at the data. Though when I scroll down, the div stays at the top, but everything gets deformed.</p>
  
  <p><strong>EDIT:</strong> I am not using any extra CSS for the divs. It is a Bootstrap container class div inside a jumbotron class div.</p>
  
  <p><a href="http://imgur.com/a/OR5T9" rel="nofollow">Here is what it ends up looking like.</a></p>
  
  <pre><code>    &lt;div class="container" id="searcher" style="text-align: center;"&gt;
          &lt;h2&gt;Where Do You Want To Go?&lt;/h2&gt;
          &lt;input type="text" class="typeahead form-control"&gt;&lt;/input&gt;
  
          &lt;div class="btn-group"&gt;
              &lt;button type="button" class="btn btn-default dropdown-toggle" id="pType" data-toggle="dropdown"&gt;
                  Select Permit Type
                  &lt;span class="caret"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Every Type&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Commuter Zone A&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Commuter Zone B&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Commuter Zone C&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Commuter Zone D&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Commuter Zone L&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Night Commuter&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Resident Permits&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Newark and Camden Permits (L)&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>The code I'm using:</p>
  
  <pre><code>function fixDiv() {
      var $cache = $('#searcher');
      if ($(window).scrollTop() &gt; 100)
          $cache.css({'position': 'fixed', 'top': '10px'});
      else
          $cache.css({'position': 'relative', 'top': 'auto'});
  }
  $(window).scroll(fixDiv);
  fixDiv();
  </code></pre>