я создал свой собственный затруднительное к этому, используя следующий код. Он использует смещение для получения позиции привязывающего тега и добавляет активный класс к элементу списка навигации, когда он достигает этой точки прокрутки. Работает хорошо и эффективно:
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");
}
};
END EDIT
Как подсказывает название, у меня есть Scrollspy (с использованием Bootstrap, очевидно), и я инициализировать его в Javascript с:
$('#navbar').scrollspy();
Что работает нормально. Однако, если один из элементов списка (тег li) в navbar ссылается на div, который является модальным, он переворачивается. Когда я начинаю прокрутку, он переворачивает активный класс из этого элемента списка в любой элемент списка в этой позиции прокрутки, поэтому элементы списка навигации выглядят так, будто они постоянно мерцают при прокрутке вверх и вниз. Вот мой Navbar и начало моего тела:
<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 в этом элементе списка устраняет всю эту проблему. Кроме того, у меня есть кнопка в карусели ниже навигационной панели, и она также открывает модальный. Это, похоже, не вызывает этой проблемы, так как это отлично работает, если я изменяю href для контакта li, но оставляю кнопку, указывающую на тот же способ, что и 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