Scrollspy не работает (BS 3 и Rails 4)

Я строю длинную страницу и хочу, чтобы вкладки навигатора стали активными, поскольку кто-то прокручивается на странице. Поскольку я использую Bootstrap 3, я думал, что scrollspy будет работать. Однако я не могу заставить его работать. Ниже мой код. Я был бы признателен за любую помощь :)Scrollspy не работает (BS 3 и Rails 4)

код для навигационной панели

<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 файла

<!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; 
}

ation.js Файл

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

HTML (фрагмент, чтобы показать секции имеют идентификатор и что навигационные ссылки на эти ссылки)

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

источник

2014-10-26 DJF

Правильность установки, за исключением случаев, когда вы не ставите на столбец #about (или любые другие). Кроме того, у вас нет bootstrap.min.js в качестве одного из файлов сценариев. Поместите его после jQuery. – Christina

Спасибо за ответ! Я поместил строку, чтобы создать полную строку и добавить изображение в фоновом режиме. Я попытался удалить, если он исправил проблему, и это не так. Кроме того, я использую [bootstrao-saas gem] (https://github.com/twbs/bootstrap-sass) для добавления бутстрапа, и он ничего не упоминает о файле min на application.js. Я проверил, что BS JS работает, видя, что выпадающее меню работает на мобильных устройствах (и оно работает), поэтому я предполагаю, что BS JS в порядке. Любые другие мысли? – DJF

Правильно, bootstrap-sprockets - это .js-файл. Arow не нужно, он добавит отрицательный запас слева и справа, ничего не использует для полной ширины. У вас есть отображаемый html-файл, на который вы можете ссылаться? – Christina

Я не мог заставить его работать, но вместо этого я создал яваскрипт код это работает. Надеюсь, это поможет кому-то в будущем.

/* 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"); 
    }   
});

источник

2014-10-27 00:11:51 DJF

ответ

Смежные вопросы