Scrollspy 不工作（BS 3 和 Rails 4）答案

【问题标题】：Scrollspy not working (BS 3 and Rails 4)Scrollspy 不工作（BS 3 和 Rails 4）
【发布时间】：2014-10-26 21:21:39
【问题描述】：

我正在构建一个长页面，并希望导航栏的选项卡在有人在页面上滚动时变为活动状态。由于我使用的是 Bootstrap 3，我认为 scrollspy 会起作用。但是，我无法让它工作。下面是我的代码。我会很感激任何帮助:)

导航栏代码

<header class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <%= link_to image_tag("Logomark_Red.png", alt: "") + "  Title", root_url, class: "navbar-brand" %>
  </div>
  <div id="active-nav" class="collapse navbar-collapse">
    <ul class="nav navbar-nav pull-right">
      <li><%= link_to "About", root_url(:anchor => "about") %></li>
      <li><%= link_to "Projects", root_url(:anchor => "past-projects") %></li>
      <li><%= link_to "Team", root_url(:anchor => "team") %></li>
      <li><%= link_to "Contact", root_url(:anchor => "contact") %></li>
    </ul>
  </div><!--/.nav-collapse -->
</div>

application.html.erb文件的sn-p

<!DOCTYPE html>
 <html lang="en">
  <head>
    ...head stuff....
  </head>
 <%= render 'layouts/nav' %>
 <body data-target="#active-nav" data-spy="scroll" data-offset="0">

正文的 CSS

body{
  position: relative;
  margin-top: 50px;
}

application.js 文件

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require colorbox-rails
//= require_tree .

HTML （sn-p 只是为了显示部分有 id 并且导航链接到这些链接）

<section id="about" class="row">
    <div class="container">
        <div class="row">
            <h1>title</h1>
            <div class="col-md-6">
                <p>content.</p>
            </div>
            <div class="col-md-6">
                <%= image_tag("lego.jpg", width: "100%", alt: "") %>
            </div>
            <%= link_to "About Magnum Group", about_url, class: "btn btn-primary" %>
        </div>
    </div>
</section>

【问题讨论】：

设置是正确的，除了你不会在#about 部分（或任何其他部分）上放置 .row。此外，您没有 bootstrap.min.js 作为脚本文件之一。放在jQuery之后。
感谢您的回复！我把行创建一个完整的行并在背景上添加一个图像。我尝试删除以查看它是否解决了问题，但没有解决。此外，我正在使用bootstrao-saas gem 添加引导程序，它没有提及有关 application.js 上的 min 文件的任何内容。我通过看到下拉菜单在移动设备上工作（并且它工作）来检查 BS JS 是否正常工作，所以我假设 BS JS 没问题。还有其他想法吗？
没错，bootstrap-sprockets就是.js文件。 .row 不是必需的，它会在左右添加负边距，全宽不使用任何内容。你有可以链接到的呈现的 html 文件吗？
另外，当你说不工作时，它不工作是什么？不是让 .nav li.active 吗？
是的，不工作我的意思是它没有使 .nav li .active。可以看网站here

标签： ruby-on-rails-4 ruby-2.0 scrollspy

【解决方案1】：

我无法让它工作，但我创建了一个可以工作的 javascript 代码。我希望它对将来的某人有所帮助。

    /* active on scroll */
marginTop = 50;
about = 849 - marginTop;
projects = 1388 - marginTop;
team = 1701 - marginTop;
contact = 2249 - marginTop;

$(window).scroll(function(){
    //Retrieve scroll distance from top
    var top = $(window).scrollTop();
    //Check if scrolled past div
    if(top >= about && top <= projects) {
        console.log('you are on about');
        $( ".navbar-nav li" ).removeClass( "active" );
        $( ".navbar-nav li" ).first().addClass( "active" );
    } else if (top >= projects && top <= team) {
        console.log('you are on projects');
        $( ".navbar-nav li" ).removeClass( "active" );
        $( ".navbar-nav li:nth-child(2)" ).addClass( "active" );
    } else if (top >= team && top <= contact) {
        console.log('you are on team');
        $( ".navbar-nav li" ).removeClass( "active" );
        $( ".navbar-nav li:nth-child(3)" ).addClass( "active" );
    } else if ( top >= contact) {
        console.log('you are on contact');
        $( ".navbar-nav li" ).removeClass( "active" );
        $( ".navbar-nav li" ).last().addClass( "active" );
    }
    else {
        console.log('tabs should not be active');
        $( ".navbar-nav li" ).removeClass( "active" );
    }        
});

【讨论】：