12

最近、特定のポイントまでスクロールした後、ページの上部に固定されたナビゲーション バーとして機能するナビゲーション バーを使用していますが、ページの下部に到達すると、ナビゲーション バー全体がちらつき、時には消えることさえあります。 . ちらつきがあり、ちらつきを止めるために側面を叩いてしまう古いテレビと考えてください。ナビゲーション バーのちらつきを止めるにはどうすればよいでしょうか。 ここに私のサイトがあるので、ちらつきのすべての栄光を目の当たりにすることができます.

これがナビのHTMLです。

<div id="nav-wrapper">
<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix">
  <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-->
</div><!--/#nav-wrapper-->

そして、ここに私のJSがあります：

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

offset: $('#nav').position()JS のオフセットを からに変更した後にのみ、これが発生し始めたことに注意してくださいoffset: 675。あなたは言うかもしれませんが、それを元に戻すだけですが、古いオフセットでは、粘着性のあるナビゲーションが時期尚早にトップにジャンプします.

あなたが私に提供できる入力の助けに感謝します!

4

4 に答える 4

11

あなたのサイトは今は問題ないように見えますが、同じ問題の解決策を探してここに来たので、ここに私の経験を追加しようと思いました.

私が抱えていた問題は、接辞コードが、ページ上の垂直位置に基づいて、接辞要素にクラス (affixまたはなど) を適用することでした。affix-bottomこれらを「ゾーン」と呼びます。

新しいクラスのCSSが、貼り付けた要素を縦に移動させるようなものだと、瞬時に別のゾーンに移動してしまう可能性があるので、クラスを削除するので、元に戻すので、クラスを適用するなど...そのための位置イベントごとに交互にonscroll点滅します。

私にとっての鍵は、接辞が切り替わったときに要素が垂直方向に移動しないようにdata-offset-top/値と CSS クラスが設定されていることを確認することでした。data-offset-bottomIE 次のようなもの:

<div class="someClass" data-spy="affix" data-offset-top="20" data-offset-bottom="300">
  ...
</div>

(これdata-offset-bottomは要素を再アタッチすることで、たとえば背の高いフッターにクラッシュしないようにするためのもので、常に必要というわけではありません。) そして、次のようになります。

.someClass.affix {
  /* position: fixed; already applied in .affix */
  top: 10px;
  /* might also need e.g. width: 300px; as position: fixed; removes the element from its parent. */
}
.someClass.affix-bottom {
  position: absolute; /* Start scrolling again. */
  top: auto; /* Override the top position above. */
  bottom: 20px; /* It should stop near the bottom of its parent. */
}

CSS クラスが変更されたときのジャンプにより、要素が入るゾーンにさらに押し込まれることがあります。これにより、境界で単一の「フリック」が発生しますが、ちらつきが繰り返されることはありません。

data-offset-top注: メニューが固定されたときの非常にわずかなジャンプは、要素を固定するときに要素の垂直位置を非常にわずかに調整するか、適切な値に設定することで、この方法で滑らかにすることができると思います。

乾杯、

レオ

于 2013-05-14T12:28:36.297 に答える
8

このBootstrap 3 Fixed Top Navbar からの回答...

以下を .navbar に追加するだけです 

.navbar
{
   -webkit-backface-visibility: hidden;
}
于 2014-06-12T19:36:42.170 に答える
2

私にとっての問題は、ページのコンテンツがメニューよりも小さいため、メニューを固定位置に変更するとページが狭くなることでした。これでコンテンツの最小高さを設定します（coffeescript）：

$ ->
  $('.content').css('min-height', ->
    $('.bs-docs-sidebar').height())

そして、すべてが魅力のように機能しました。

于 2013-08-19T14:28:02.730 に答える
1

これを CSS クラスに追加するだけです。

.navbar-fixed-top, .navbar-fixed-bottom { position:unset; }
于 2016-12-07T10:26:10.443 に答える