javascript - 向下滚动页面时如何保持 float 顶部栏？

Question

大家好，我想在我的页面顶部有一个 float 的顶部栏，即使我向下滚动页面也能看到它。我尝试使用以下代码来实现此目的，但由于某种原因它不起作用!在尝试排除故障后，我注意到 $(document).ready(function() 永远不会变成真的!你们能帮我看看这里出了什么问题吗？

float 顶栏:

<div class="FlyingTopBar">
    <div class="GlobalNav">    
      <div class="Content">
        <span class="Line"></span>

        <a class="Active" href="/" title="Home">Home</a>
        <span class="Line"></span>
        <a  href="/link1.html" title="Link">Link</a>
        <span class="Line"></span>
        <a  href="/link2.html" title="Link">Link</a>
        <span class="Line"></span>
        <a  href="/link3.html" title="Link">Link</a>
        <span class="Line"></span>
        <a  href="/link4.html" title="Link">Link</a>
        <span class="Line"></span>



        <a  href="/link5.html" title="Link">Link</a>
        <span class="Line"></span>
        <a  href="/link6.html" title="Link">Link</a>
        <span class="Line"></span>

        <a  href="/link7.html" title="Link">Link</a>
        <span class="Line"></span>




        <a  href="/link8.html" title="Link">Link</a>
        <span class="Line"></span>
        <a href="/link9.html" title="Link">Link</a>
        <span class="Line"></span>
        <a href="/link10.html" title="Link">Link</a>
        <span class="Line"></span>
        <div class="BottomFix"></div>
      </div>
    </div>


  </div> 

javascript 在向下滚动时将 float tobar 保持在顶部:

<script type="text/javascript">
  /*<![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 < 0) amount_scrolled = 0;  //not tested iPad reversed scroll fix
        if (amount_scrolled < 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 > 0 ) {
      $('#SideNavPolls').show(0);
    }
  /*]]>*/
  </script>

部分CSS:

.FlyingTopBar {z-index:20; position:fixed; top:120px; left:0px; width:100%; visibility:hidden;} /* <- top updated by JS */ 

Answer 1

将它添加到 FlyingTopBar 类，在这种情况下真的不需要使用 JavaScript :-

. FlyingTopBar { position : fixed; top: 0px; width:100%; z-index:20; }

要了解有关固定定位的更多信息，请浏览:http://www.w3schools.com/cssref/pr_class_position.asp

希望对您有所帮助。 :-)干杯!