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：

<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 
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 に答える
1

はい、JavaScriptは必要ありません。このフィドルをチェックするか、CSSをご覧ください。

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