轨道上的红宝石 - 突出显示了引导滚动间谍最终元素 - ruby on rails - Bootstrap Scrollspy final element highlighted 小贝子编程网

好的，所以希望这是关于 Bootstrap Scrollspy 的最后一个问题，几乎在那里，我希望还有一个问题需要解决。正如我所读到的那样，拥有 100% 的身体似乎不同意滚动间谍（我使用粘性页脚）。无论我在页面上的哪个位置，我的导航中的最后一个元素都会突出显示。

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 输出（导航）

  <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>

为代码量道歉，但我想最好有更多

代码

那么有谁知道这个问题的解决方案，因为滚动间谍目前看起来确实很错误

谢谢

您根本无法在ScrollSpy监视的元素上设置100%的高度，无论是body还是其他div。
但是，GitHub 上有一个问题建议解决此问题（也在此处讨论）。

在您的情况下，这将是：

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

这是使用该修复程序的代码的 jsFiddle。请注意，我更改了您的一些 HTML：

我再次删除了data-target和data-spy属性。启动 ScrollSpy 时，请使用数据属性或 JavaScript。
我给你的span9div #spyOnThis ID，因为额外的标记是不必要的。

希望这将一劳永逸地解决这个问题。

编辑

这个解决方案奏效了;对于@Richlewis的特定场景，我们需要将参数offset: -250添加到ScrollSpy。

我刚刚在我正在构建的网站上工作。我遇到了同样的问题，其中最后一个元素总是突出显示。我的问题是我在 nav 元素上调用.scrollspy()，而它应该在正文上。

尝试将脚本调用更改为：

$('body').scrollspy();

如果其他答案对您不起作用，我的问题最终是页面顶部缺少文档类型。

Scrollspy调用公式中的$(window).height()来计算当前的滚动位置。从另一个问题中，您可以看到，如果没有正确的文档类型，此调用将不起作用。

一旦我<!DOCTYPE html>添加到HTML的顶部，Scrollspy就开始突出显示正确的链接。

轨道上的红宝石 - 突出显示了引导滚动间谍最终元素

相关内容

最新更新

热门标签：