3

さて、これがBootstrap Scrollspyの最後の質問であることを願って、ほぼそこにあります。修正すべきもう1つの問題があります。私が読んだように、100％のボディを持つことはscrollspy（スティッキーフッターを使用しているIm）に同意しないようです。ページのどこにいても、ナビゲーションの最後の要素が強調表示されます。

I have tried removing 100% body
I have tried removing the scrollspy js
I have tried setting the body as the target element
I have tried $('body').scrollspy();

これらはどれも機能しません。スパイしている要素に高さを設定すると、ターゲット要素をかなり超えてスクロールしてから変化するように見えますが、機能します。まだベタベタフッターをキープできるようにしたいと思います。

これが私のコードです

意見

<div class="container">
 <div class="row show-grid clear-both">
  <div id="left-sidebar" class="span3 sidebar">
    <div class="side-nav sidebar-block">
     <div id="dateNav">
      <h3 class="resultTitle fontSize13">Release Dates</h2>
       <ul class="nav date">
        <% @response.each_pair do |date, movie| %>
        <li><i class="icon-chevron-right"></i><%= link_to date_format(date), "#d_#{date}", :id=> '#d_#{date}' %></li>
        <% end %>
      </ul>
     </div>
    </div>
  </div>
<div class="span9">
  <div id="spyOnThis" data-spy="scroll" data-target="#dateNav">
   <% @response.each_pair do |date, movie| %>
    <h3 class="resultTitle fontSize13" id="d_<%= date %>">Available on&nbsp;<%= date_format(date) %></h3>
    <% movie.each do |m| %>
      <div class="thumbnail clearfix">
        <!--Image here
    <% end %>>
        <div class="caption pull-right">
          <!--Content Here
        </div>
      </div>
    <% end %>
  <% end %>
  </div>
</div><!--span9-->
</div><!--Row-->
</div><!--/container-->

JS

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

CSS

#dateNav{
position: fixed;
}

#spyOnThis {
height:100%;
overflow:auto;
}

.side-nav .active a {
 color: #FFBE00;
}

HTML出力（Nav）

  <div id="left-sidebar" class="span3 sidebar">
   <div class="side-nav sidebar-block">
    <div id="dateNav">
     <h3 class="resultTitle fontSize13">Release Dates</h3>
     <ul class="nav date">
    <li><i class="icon-chevron-right"></i>
    <a id="#d_#{date}" href="#d_2013-01-09">9th Jan 2013</a>
    </li>
    <li><i class="icon-chevron-right"></i>
    <a id="#d_#{date}" href="#d_2013-01-11">11th Jan 2013</a>
  </li>
  <li class="active"><i class="icon-chevron-right"></i>
  <a id="#d_#{date}" href="#d_2013-01-30">30th Jan 2013</a>
  </li>
  </ul>
  </div>
 </div>
 </div>

スパイされている要素

<div class="span9">
 <div id="spyOnThis" data-target="#dateNav" data-spy="scroll">

  <h3 id="d_2013-01-09" class="resultTitle fontSize13">Available on 9th Jan 2013</h3>
   <div class="thumbnail clearfix">
    <!--Image Here -->
    <div class="caption pull-right">
     <!--Paragraphs in here -->
    </div>
   </div>

    <h3 id="d_2013-01-11" class="resultTitle fontSize13">Available on 11th Jan 2013</h3>
     <div class="thumbnail clearfix">
    <!--Image Here -->
     <div class="caption pull-right">
    <!-Paragraphs here
     </div>
    </div>

     <div class="thumbnail clearfix">
      <!-- Image Here-->
      <div class="caption pull-right">
       <!-paragraphs here -->
      </div>
    </div>

     <div class="thumbnail clearfix">
      <!-- Image Here-->
      <div class="caption pull-right">
       <!-paragraphs here -->
      </div>
    </div>

     <h3 id="d_2013-01-09" class="resultTitle fontSize13">Available on next date</h3>
   <div class="thumbnail clearfix">
    <!--Image Here -->
    <div class="caption pull-right">
     <!--Paragraphs in here -->
    </div>
   </div>
   </div>
   </div>

コードの量についてお詫びしますが、もっと多くのコードを持っている方がいいと思います

スクロールスパイは現時点ではかなりバグがあるように見えるので、これに対する解決策を知っている人はいますか？

ありがとう

4

3 に答える 3

4

ScrollSpyでスパイしている要素に、それがそうであるかどうかにかかわらず、100％の高さを設定することはできませbodyんdiv。
ただし、GitHubには、この回避策を提案する問題があります（ここでも説明します）。

あなたの場合、これは次のようになります。

$(window).scrollspy({wrap: $('#spyOnThis')[0]});


これが、その修正で機能するコードのjsFiddleです。HTMLの一部を変更したことに注意してください。

  • data-targetおよびdata-spy属性を再度削除しました。ScrollSpyを開始するときは、データ属性またはJavaScriptの いずれかを使用してください。
  • 余分なマークアップが不要だったので、私はあなたのspan9divに#spyOnThisIDを与えました。

うまくいけば、これはそれを一度だけ解決するでしょう。

編集

このソリューションは機能しました。@Richlewisの特定のシナリオでは、offset: -250ScrollSpyにパラメーターを追加する必要がありました。

于 2013-01-25T18:59:48.350 に答える
0

自分が構築しているサイトでscrollspyを動作させました。最後の要素が常に強調表示されるという同じ問題が発生していました。私の問題は.scrollspy()、nav要素が本体にあるべきときにそれを呼び出していたということでした。

スクリプト呼び出しを次のように変更してみてください。

$('body').scrollspy();
于 2013-01-25T18:34:07.957 に答える
0

他の答えがうまくいかない場合、私の問題はページの上部にDoctypeがないことでした。

Scrollspyは$(window).height()数式を呼び出して、現在のスクロール位置を計算します。 この他の質問から、この呼び出しは正しいDoctypeがないと機能しないことがわかります。

HTMLの先頭に追加<!DOCTYPE html>するとすぐに、Scrollspyは正しいリンクを強調表示し始めました。

于 2016-12-28T21:40:31.393 に答える