1
编辑引导Scrollspy随机添加和删除“活动”类导航栏链接滚动时，如果模式被链接到一个导航栏链接
我用下面的代码创建了自己的修复了这一点。它使用偏移量来获取定位标记的位置，并在激活的类到达该滚动点时将其添加到导航列表项中。运作良好，高效：
customScrollSpy($(window).scrollTop());
$(window).on('scroll', function() {
var st = $(this).scrollTop();
customScrollSpy(st);
});
function customScrollSpy(st) {
if ((st >= $("#top").offset().top && st < $("#latest-work").offset().top) && !$("#nav-item-1").hasClass("active"))
{
$('[id^="nav-item-"]').removeClass("active");
$("#nav-item-1").addClass("active");
}
else if ((st >= $("#latest-work").offset().top && st < $("#content1").offset().top) && !$("#nav-item-2").hasClass("active"))
{
$('[id^="nav-item-"]').removeClass("active");
$("#nav-item-2").addClass("active");
}
else if ((st >= $("#content1").offset().top && st < $("#latest-news").offset().top) && !$("#nav-item-3").hasClass("active"))
{
$('[id^="nav-item-"]').removeClass("active");
$("#nav-item-3").addClass("active");
}
else if (st >= $("#latest-news").offset().top && !$("#nav-item-4").hasClass("active"))
{
$('[id^="nav-item-"]').removeClass("active");
$("#nav-item-4").addClass("active");
}
};
编辑完
正如标题所暗示的，我有Scrollspy（使用引导明显），和我一起初始化它在Javascript：
$('#navbar').scrollspy();
哪些工作正常。但是，如果navbar中的其中一个列表元素（li标签）引用了一个模式的div，则该元素会翻转出来。当我开始滚动时，它会将活动类从该列表项目翻转到该滚动位置应该包含的正确列表项目，因此导航栏列表项目看起来像在您上下滚动时不断闪烁。这是我的导航栏和我的身体开始：
<body id="top" data-spy="scroll" data-target=".navbar">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="index.html"><img src="img/logo.png" alt="logo"></a>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a class="scroll" href="#top">Home</a></li>
<li><a class="scroll" href="#latest-work">Work</a></li>
<li><a class="scroll" href="#content1">About</a></li>
<li><a class="scroll" href="#latest-news">News</a></li>
<li><a class="scroll" data-toggle="modal" href="#request-quote">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
正如你所看到的，最后一个列表项（“联系人”），是什么打破它。删除“滚动”类没有任何帮助。我不确定问题出在哪里，但改变该列表项目的href可以解决整个问题。另外，我在导航栏下面的旋转木马中有一个按钮，它也打开模式。它似乎并没有导致这个问题 - 也就是说，如果我更改联系人li的href，但将该按钮指向与Contact指向上述代码中相同的模式，则此工作正常。
下面是情况下重要的模式：
<!--Request Quote modal-->
<div id="request-quote" class="modal hide fade" tabindex="-1" data-width="760">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Request a quote</h3>
</div>
<form method="POST" action="contact-form-submission.php" class="form-horizontal">
<div class="modal-body">
<div class="row-fluid">
<div class="span12">
<h4>*All information is required</h4>
<p><label>Full Name</label>
<input name="name" type="text" class="span12"></p>
<p><label>Band Name</label>
<input name="band_name" type="text" class="span12"></p>
<p><label>Email</label>
<input name="email" type="email" class="span12"></p>
<p><label>Link to Your Band's Prior Material (Facebook, Youtube, etc.)</label>
<input name="link" type="text" class="span12"></p>
</div>
</div>
<div class="row-fluid">
<h5 class="span12">What are you looking for?</h5>
</div>
<div class="row-fluid">
<div class="span4">
<p><label>Select all that apply:</label></p>
<p class="form-boxes"><label class="hand">
<input name="tracking" type="checkbox" value="tracking"> Tracking
</label>
<label class="hand">
<input name="mixing" type="checkbox" value="mixing"> Mixing
</label>
<label class="hand">
<input name="mastering" type="checkbox" value="mastering"> Mastering
</label>
<label class="hand">
<input name="editing" type="checkbox" value="editing"> Editing
</label>
<label class="hand">
<input name="other" type="checkbox" value="other"> Other
</label></p>
</div>
<div class="span8">
<p><label>Number of Songs</label>
<input name="songs" type="text" class="span12"></p>
<p><label>Explain your project/needs (if you selected "other", please clarify)</label>
<textarea name="comments" class="span12"></textarea></p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-inverse">Close</button>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
<!--/Request Quote modal-->
任何帮助将不胜感激。
UPDATE：
我注释掉$('#navbar').scrollspy();而且还在发生。删除我的模式的代码的作品，所以我不知道是什么问题...模式功能很好，除了这一点。有什么想法发生了什么？
我面临同样的问题。这绝对是由模态造成的。我发现这个链接https://github.com/twitter/bootstrap/pull/2212这是关于这个问题，但我不明白他们如何解决它。如果你能找出解决办法，请告诉我。谢谢。 – Snowfish
@Snowfish我通过创建自己的代码来修复它，并将其作为编辑发布到上面。 – trevorhinesley