title: How to hold floating topbar when scrolling down the page?
body: <p>hi all i want to have a floating topbar on the top of my page and be visiable even if i scroll down the page. I tried to achieve this using following code but for some reason it doesn't work! After trying to troubleshoot i noticed that <strong>$(document).ready(function()</strong>
   never becomes true! could you guys help me what is wrong here ?</p>
  
  <p>floating topbar:
  </p>
  
  <pre><code>&lt;div class="FlyingTopBar"&gt;
      &lt;div class="GlobalNav"&gt;    
        &lt;div class="Content"&gt;
          &lt;span class="Line"&gt;&lt;/span&gt;
  
          &lt;a class="Active" href="/" title="Home"&gt;Home&lt;/a&gt;
          &lt;span class="Line"&gt;&lt;/span&gt;
          &lt;a  href="/link1.html" title="Link"&gt;Link&lt;/a&gt;
          &lt;span class="Line"&gt;&lt;/span&gt;
          &lt;a  href="/link2.html" title="Link"&gt;Link&lt;/a&gt;
          &lt;span class="Line"&gt;&lt;/span&gt;
          &lt;a  href="/link3.html" title="Link"&gt;Link&lt;/a&gt;
          &lt;span class="Line"&gt;&lt;/span&gt;
          &lt;a  href="/link4.html" title="Link"&gt;Link&lt;/a&gt;
          &lt;span class="Line"&gt;&lt;/span&gt;
  
  
  
          &lt;a  href="/link5.html" title="Link"&gt;Link&lt;/a&gt;
          &lt;span class="Line"&gt;&lt;/span&gt;
          &lt;a  href="/link6.html" title="Link"&gt;Link&lt;/a&gt;
          &lt;span class="Line"&gt;&lt;/span&gt;
  
          &lt;a  href="/link7.html" title="Link"&gt;Link&lt;/a&gt;
          &lt;span class="Line"&gt;&lt;/span&gt;
  
  
  
  
          &lt;a  href="/link8.html" title="Link"&gt;Link&lt;/a&gt;
          &lt;span class="Line"&gt;&lt;/span&gt;
          &lt;a href="/link9.html" title="Link"&gt;Link&lt;/a&gt;
          &lt;span class="Line"&gt;&lt;/span&gt;
          &lt;a href="/link10.html" title="Link"&gt;Link&lt;/a&gt;
          &lt;span class="Line"&gt;&lt;/span&gt;
          &lt;div class="BottomFix"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
    &lt;/div&gt; 
  </code></pre>
  
  <p>javascript to hold the floating tobar on the top while scrolling down:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    /*&lt;![CDATA[*/
  
  
     alert('start');
  
        var $flying_bar = $('div.FlyingTopBar');
        var amount_scrolled;
        var initial_top_position =0;
        var actual_top_position;
  
           $(document).ready(function() {
          updateCurrentPosition();
          alert('visable topbar1');
          $flying_bar.css('visibility','visible');
           alert('visable topbar2');
  
          $(window).bind('scroll', updateCurrentPosition);
          })
  
        function updateCurrentPosition() {
          amount_scrolled = $window.scrollTop();
          if (amount_scrolled &lt; 0) amount_scrolled = 0;  //not tested iPad reversed scroll fix
          if (amount_scrolled &lt; initial_top_position) {
            actual_top_position = initial_top_position - amount_scrolled;
            $flying_bar.css({'top':actual_top_position + 'px'});
          } else {
            $flying_bar.css({'top':'0px'});
          }
        }
  
  
  
      headerTickerInit('div.ReportTitleTicker');
  
      if( $('#ScrollPollSection').length &gt; 0 ) {
        $('#SideNavPolls').show(0);
      }
    /*]]&gt;*/
    &lt;/script&gt;
  </code></pre>
  
  <p>part of css:</p>
  
  <pre><code>.FlyingTopBar {z-index:20; position:fixed; top:120px; left:0px; width:100%; visibility:hidden;} /* &lt;- top updated by JS */ 
  </code></pre>