1

編集

次のコードを使用して、これに対する独自の修正を作成しました。オフセットを使用してアンカー タグの位置を取得し、そのスクロール ポイントに到達すると、アクティブなクラスをナビゲーション リスト項目に追加します。うまく機能し、効率的です。

customScrollSpy($(window).scrollTop());

$(window).on('scroll', function() {
   var st = $(this).scrollTop();

   customScrollSpy(st);
});

function customScrollSpy(st) {
  if ((st >= $("#top").offset().top && st < $("#latest-work").offset().top) && !$("#nav-item-1").hasClass("active"))
   {
      $('[id^="nav-item-"]').removeClass("active");
      $("#nav-item-1").addClass("active");
   }
   else if ((st >= $("#latest-work").offset().top && st < $("#content1").offset().top) && !$("#nav-item-2").hasClass("active"))
   {
      $('[id^="nav-item-"]').removeClass("active");
      $("#nav-item-2").addClass("active");
   }
   else if ((st >= $("#content1").offset().top && st < $("#latest-news").offset().top) && !$("#nav-item-3").hasClass("active"))
   {
      $('[id^="nav-item-"]').removeClass("active");
      $("#nav-item-3").addClass("active");
   }
   else if (st >= $("#latest-news").offset().top && !$("#nav-item-4").hasClass("active"))
   {
      $('[id^="nav-item-"]').removeClass("active");
      $("#nav-item-4").addClass("active");
   }
};

編集終了

タイトルが示すように、私は Scrollspy (明らかに Bootstrap を使用) を持っており、Javascript で次のように初期化します。

$('#navbar').scrollspy();

これはうまくいきます。ただし、navbar のリスト要素 (li タグ) の 1 つがモーダルである div を参照している場合、反転します。スクロールを開始すると、アクティブなクラスがそのリスト項目からそのスクロール位置にある正しいリスト項目に反転するため、ナビゲーションバーのリスト項目は、上下にスクロールすると常にちらつきます。ここに私のナビゲーションバーと私の体の始まりがあります:

<body id="top" data-spy="scroll" data-target=".navbar">

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <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>
          <a class="brand" href="index.html"><img src="img/logo.png" alt="logo"></a>
          <div class="nav-collapse collapse">
            <ul class="nav pull-right">
              <li><a class="scroll" href="#top">Home</a></li>
              <li><a class="scroll" href="#latest-work">Work</a></li>
              <li><a class="scroll" href="#content1">About</a></li>
              <li><a class="scroll" href="#latest-news">News</a></li>
              <li><a class="scroll" data-toggle="modal" href="#request-quote">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

ご覧のとおり、最後のリスト項目 (「連絡先」) が問題です。「スクロール」クラスを削除しても何の役にも立ちません。何が問題なのかわかりませんが、そのリスト項目の href を変更すると、この問題全体が修正されます。また、ナビゲーションバーの下のカルーセルにボタンがあり、モーダルも開きます。この問題は発生していないようです。つまり、Contact li の href を変更しても、上記のコードで Contact が指しているのと同じモーダルを指しているボタンをそのままにしておくと、これは正常に機能します。

重要な場合のモーダルは次のとおりです。

<!--Request Quote modal-->
    <div id="request-quote" class="modal hide fade" tabindex="-1" data-width="760">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>Request a quote</h3>
      </div>
      <form method="POST" action="contact-form-submission.php" class="form-horizontal">
      <div class="modal-body"> 
        <div class="row-fluid">
          <div class="span12">
            <h4>*All information is required</h4>
            <p><label>Full Name</label>
            <input name="name" type="text" class="span12"></p>
            <p><label>Band Name</label>
            <input name="band_name" type="text" class="span12"></p>
            <p><label>Email</label>
            <input name="email" type="email" class="span12"></p>
            <p><label>Link to Your Band's Prior Material (Facebook, Youtube, etc.)</label>
            <input name="link" type="text" class="span12"></p>
          </div>
        </div>
        <div class="row-fluid">
          <h5 class="span12">What are you looking for?</h5>
        </div>
        <div class="row-fluid">
          <div class="span4">
            <p><label>Select all that apply:</label></p>
            <p class="form-boxes"><label class="hand">
            <input name="tracking" type="checkbox" value="tracking"> Tracking
            </label>
            <label class="hand">
            <input name="mixing" type="checkbox" value="mixing"> Mixing
            </label>
            <label class="hand">
            <input name="mastering" type="checkbox" value="mastering"> Mastering
            </label>
            <label class="hand">
            <input name="editing" type="checkbox" value="editing"> Editing
            </label>
            <label class="hand">
            <input name="other" type="checkbox" value="other"> Other
            </label></p>
          </div>
          <div class="span8">
            <p><label>Number of Songs</label>
            <input name="songs" type="text" class="span12"></p>
            <p><label>Explain your project/needs (if you selected "other", please clarify)</label>
            <textarea name="comments" class="span12"></textarea></p>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-inverse">Close</button>
        <button type="submit" class="btn btn-primary">Send</button>
      </div>
      </form>
    </div>
    <!--/Request Quote modal-->

どんな助けでも大歓迎です。

アップデート：

私はコメントアウトしました$('#navbar').scrollspy();が、それはまだ起こっています。モーダルのコードを削除するとうまくいくので、何が問題なのかわかりません...モーダルはこれを除いて正常に機能します。何が起こっているのですか？

4

1 に答える 1

2

私の実装では、タグ/クラスを変更して新しいクラスにブーストラップ スタイルを追加するだけでうまくいきました.nav li > a。私の場合、モーダルがポップアップするので、アクティブな効果を持つ必要はありませんでした。これは私にははるかに速くてきれいに見えましたが、すべてのスタイルと機能固有の問題に対する解決策ではないかもしれません.

于 2013-07-26T16:14:56.143 に答える