1

Bootstrap を使用して作成したサイトで affix-top 機能を適切に動作させようとしてきましたが、オフセットをどのように設定しても、常にページの上部に早まってジャンプします。ローカル ビューまたは Firefox で自分のページを表示すると、すべてが正常に動作し、激しいジャンプは発生しませんが、実際にサーバーにアップロードして Firefox 以外で表示すると、それがそのときです。物事が不安定になります。

私のナビゲーションバーのHTMLは次のとおりです。

<div id="nav-wrapper">
<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix" data-offset-top="875">
  <div class="navbar-inner" data-spy="affix-top">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <ul class="nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#service-top">Services</a></li>
            <li><a href="#contact-arrow">Contact</a></li>
        </ul><!--/.nav-->
      </div><!--/.nav-collapse collapse pull-right-->
    </div><!--/.container-->
  </div><!--/.navbar-inner-->
</div><!--/#nav /.navbar navbar-inverse-->

ここに私のJSがあります：

<script>
    $(document).ready(function() {
        $('#nav-wrapper').height($("#nav").height());
        $('#nav').affix({
            offset: $('#nav').position()
        });
    });
</script>

そして、関連する私の CSS のいくつか:

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}
#nav {
    position:relative;
}

価値のあるものとして、ここに私が最初に取り組んだ同様の投稿がありますが、それでもうまくいきませんでした。 ここに私のサイトもありますので、ナビゲーションバーが飛び回っている様子を見ることができます。

助けてくれてありがとう。私はこの問題を解決できないようです！

4

1 に答える 1

1

これは最善の解決策とは思えませんが、うまくいきます (今のところ)。私がしたことは、JS コードを少し変更したことだけです。

<script>
    $(document).ready(function() {
        $('#nav-wrapper').height($("#nav").height());
        $('#nav').affix({
            offset: 675
        });
    });
</script>
于 2013-02-12T00:37:51.453 に答える