0

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

浮动顶栏： 

<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 在向下滚动时将浮动 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 */
4

3 回答 3

1

是的，不需要 javascript，看看这个 fiddle或者这里是 CSS

#fixed-nav {
 position: fixed;
 background: black;
 margin: 0;
 padding: 20px;
 width: 100%;
 top: 0;
 left: 0;
}
于 2013-03-25T06:18:51.187 回答
1 
position:fixed;

将完成这项工作。我不明白为什么你必须添加一个脚本来做到这一点。

于 2013-03-25T06:03:16.843 回答
1

将此添加到 FlyingTopBar 类，在这种情况下确实不需要使用 JavaScript：-

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

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

我希望这有帮助。:-) 干杯！

于 2013-03-25T06:13:30.403 回答