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 (片段只是为了显示部分有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>
答
我不能使它工作,而是我创建了一个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");
}
});
设置是正确的,除非你不会把.row放在Section #about(或任何其他)上。另外,您没有将bootstrap.min.js作为其中一个脚本文件。把它放在jQuery之后。 – Christina 2014-10-26 21:30:24
感谢您的回复!我把这一行创建一个完整的行并在背景上添加一个图像。我试图删除,看看它是否解决了问题,而没有。另外,我正在使用[bootstrao-saas gem](https://github.com/twbs/bootstrap-sass)来添加bootstrap,并且它没有提到application.js上的min文件的任何内容。我检查了BS JS正在工作,看到下拉菜单在移动设备上工作(并且它工作),所以我假设BS JS是确定的。任何其他想法? – DJF 2014-10-26 21:39:11
没错,bootstrap-sprockets是.js文件。 .row不是必需的,它会在左侧和右侧添加负边距,完全不使用任何宽度。你有可以链接到的HTML文件吗? – Christina 2014-10-26 21:43:26