Twitter bootstrap scrollspy not working with nav-pills and smooth scrolling
Question
I am using Bootstrap's nav pills as my top navbar, and I have used a piece of code to scroll to a certain point on the page when a pill is clicked. I am now trying to get scrollspy to work so the class of the pill will change from "active" to "disabled" (I have special css setup for the "disabled" class, but I'm having no luck. Any thoughts?
Here's the code:
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="pantastic.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Questrial|Lobster|Open+Sans:300,400|Josefin+Sans:300,400' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.slideto.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
$('.toplogo').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
$('.firstscroll').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
$('.secondscroll').click(function(){
$("html, body").animate({ scrollTop: 500 }, 600);
return false;
});
$('.thirdscroll').click(function(){
$("html, body").animate({ scrollTop: 1450 }, 600);
return false;
});
$('.fourthscroll').click(function(){
$("html, body").animate({ scrollTop: 2740 }, 600);
return false;
});
});
</script>
</head>
<body data-spy="scroll" data-target=".nav nav-pills">
<div class="navbox">
<div class="container">
<div class="row">
<div class="span5">
<a href="#"><img class="toplogo" src="navlogo.png" alt="logo"/></a>
</div>
<div class="span10 offset5">
<div class="navbuttons">
<ul class="nav nav-pills custom">
<li class="active firstscroll">
<a href="#1">Home</a>
</li>
<li class="disabled secondscroll"><a href="#secondunit">What is Pantastic?</a></li>
<li class="disabled thirdscroll"><a href="#3">About Us</a></li>
<li class="disabled fourthscroll"><a href="#4">FAQ</a></li>
<li class="disabled"><a href="#modal" data-toggle="modal"><img src="Price_Button.png" alt="Order Now" onmouseover="this.src='Price_Buttonhover.png'" onmouseout="this.src='Price_Button.png'"/></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="herounit">
<div class="container">
<h1> Introducing Pantastic! </h1>
<div class="row">
<h4> Pantastic is the easiest way to bring your iPhone panoramas to life! Simply send us your panorama, and we will print, matte, and ship it right to your doorstep. </h4>
</div>
<div id="secondunit">
<div class="row">
<img src="pricetag2.png" alt="pricetag">
</div>
</div>
</div>
</div>
2 answers
solution1
0 2014-01-05 23:31:34
I know this question is dated but I had this issue today and wanted to help those in future need who find this question.
Make sure the data-target attribute is set to the PARENT element (id/class) of the navigation. I had similar issue when using jQuery plugin animatescroll. Also the BootStrap documentation states....
Resolvable ID targets required
Navbar links must have resolvable id targets. For example, a home must correspond to something in the DOM like .
solution2
0 2014-08-02 23:06:04
Instead of this:
<body data-spy="scroll" data-target=".nav nav-pills">
Use this:
<body data-spy="scroll" data-target=".navbuttons">
For one, I'm not sure that you can target two classes, I believe it was made to take only one target element and above you are referencing on target in two ways. Plus its nt the right target it should be the parent, but if you were ever to reference one single element by two classnames you would need to reference it something like this:
<body data-spy="scroll" data-target=".nav.nav-pills">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.