EDIT
I created my own fix to this using the following code. It uses offset to get the position of the anchor tag, and adds the active class to the nav list item when it reaches that scrollpoint. Works well and is efficient:
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
As the title suggests, I have Scrollspy (using Bootstrap obviously), and I initialize it in Javascript with:
$('#navbar').scrollspy();
Which works fine. However, if one of the list elements (li tag) in the navbar references a div that is a modal, it flips out. When I start scrolling, it flips the active class from that list item to whatever the correct list item at that scroll position should be, so the navbar list items look like they're flickering constantly as you scroll up and down. Here is my navbar and the beginning of my body:
<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>
As you can see, the last list item ("Contact"), is what is breaking it. Removing the "scroll" class doesn't help any. I'm not sure what the problem is, but changing the href on that list item fixes this whole issue. Also, I have a button in the carousel below the navbar and it opens the modal as well. It doesn't seem to cause this issue--aka this works fine if I change the href of the Contact li but leave the button pointing to the same modal that Contact is pointing to in the above code.
Here is the modal in case that matters:
<!--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-->
Any help would be greatly appreciated.
UPDATE:
I commented out $('#navbar').scrollspy(); and it is still happening. Removing my modal's code works, so I'm not sure what the problem is... the modal functions fine except for this. Any ideas what's happening?
