Question

大家好，我希望在页面顶部有一个浮动的顶部栏，即使我向下滚动页面也可以看到。我尝试使用以下代码实现此目的但由于某种原因它不起作用！在尝试排除故障后，我注意到 $（文档）.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在向下滚动的同时按住顶部的浮动横杆：

<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

position:fixed;

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

Answer 2

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

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

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

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

Answer 3

是的，不需要javascript，请查看this fiddle或这里是CSS

#fixed-nav {
 position: fixed;
 background: black;
 margin: 0;
 padding: 20px;
 width: 100%;
 top: 0;
 left: 0;
}

滚动页面时如何保持浮动顶部栏？

3 个答案: