This is the first time I'm using bootstrap scroll spy so I'm not sure If I'm doing something wrong. (Well obviously I'm) Here is the problem(s). I had to use an offset of -190 so the bottom of the red nav bar sits where the section starts. Once I apply the offset it's not highlighting (active estate) that section on the main nav. It highlights the section before until I scroll down.
Also I don't seem to find a way to attach a link to go all the way up. Since it has to go after the main nav. Where do I put the #home ID?
Here is the code: Please note that I'm not copying the whole HTML since it's really long but I'm also attaching the live link.
<header id="global-header">
<div class="header-cont-info"> Call to schedule your <span class="yellow uppercase">free,</span> no obligation assessment: <span class="yellow">407–844–1182 </span></div>
<!-- Main nav-->
<nav id="navbar">
<h1 class="visuallyhidden">Main navigation</h1>
<ul class="nav">
<li class="home-mn-btn active"><a href="#home">Home</a></li>
<li class="services-mn-btn"><a href="#services">Services</a></li>
<li class="reviews-mn-btn"><a href="#reviews-section">Reviews</a></li>
<li class="tp-logo"><img src="img/tidy-pools-logo.png" width="332" height="194" alt="Tidy Pools Logo"></li>
<li class="faq-mn-btn"><a href="#faq">Faq</a></li>
<li class="contact-mn-btnn"><a href="#contact-section">Contact</a></li>
<li class="portal-mn-btn"><a href="#">Customer Portal</a></li>
</ul>
</nav><!-- Main nav ends-->
</header>
<!-- Services section-->
<div class="section-dividers-dark"><!--It contains the bottom shadow-->
<section id="services"><!--Ribbon ends-->
<p><a href="#" class="buttons yellow-buttons fancybox"><span class="modern-pictogram">W</span> View Pictures of Our Work</a></p>
<div class="clear-fix"></div>
<!-- Residential Pool and Spa Maintenance section-->
<section>
<header>
<h2>Residential Pool and Spa Maintenance</h2>
<p>Enjoy prehensive weekly service for only $80/month, including:</p>
</header>
<ol>
<li><h3>Cleaning And Debris Removal</h3>
<ul>
<li> Skim surface and bottom of pool</li>
<li>Brush interior surfaces and steps</li>
<li>Clean tile</li>
<li>Vacuum and clean deck as necessary</li>
</ul>
</li>
<li><h3>Water Quality Assurance</h3>
<ul>
<li>Test water and balance</li>
<li>Add necessary chemicals</li>
</ul>
</li>
<li><h3>Equipment Maintenance</h3>
<ul>
<li>Empty baskets</li>
<li>Clean filter</li>
<li>Check equipment functioning</li>
</ul>
</li>
</ol>
</section><!-- Residential Pool and Spa Maintenance section ends--><br>
<!-- Commercial Pool Maintenance section-->
<section>
<h2>Commercial Pool Maintenance</h2>
<p>We offer affordable mercial service as well.<br>
Simply call and we’ll be happy to provide you<br>
with a customized quote for your property’s needs.</p>
</section><!-- Commercial Pool Maintenance section ends-->
<!-- Water Recovery Services section-->
<section>
<h2>Water Recovery Services</h2>
<p>For green pool/water recovery services,<br>
simply call for your free quote!</p>
</section><!-- Water Recovery Services section ends-->
</section>
</div>
<!-- Services section ends-->
<!-- Reviews section-->
<!-- Section dividers. These expand 100% and are used to separate the sections-->
<div class="section-dividers" id="reviews-section">
<!-- Section inner wrappers. These contain the section max-width-->
<div class="section-inner-wrapper">
<section id="reviews">
<header><!--Ribbon ends-->
<p><span class="dark-blue">See what our valued customers have to say about Tidy Pools quality swimming pool cleaning and maintenance service.</span><span class="yellow"> This is just a sample of the kind testimonials we have received, and we look forward to adding yours!</span></p>
</header>
<ul id="people-reviews">
<li>“ I have had pools for 27 years. Tidy Pools is the most professional, honest and reliable pany I’ve had work for me! Your integrity makes me smile and you’ve always been so fair. Thank you. ” <br>
<span class="review-names">– Roxane B.</span></li>
<li>“ I have had pools for 27 years. Tidy Pools is the most professional, honest and reliable pany I’ve had work for me! Your integrity makes me smile and you’ve always been so fair. Thank you. ” <br>
<span class="review-names">– Roxane B.</span></li>
<li>“ I have had pools for 27 years. Tidy Pools is the most professional, honest and reliable pany I’ve had work for me! Your integrity makes me smile and you’ve always been so fair. Thank you. ” <br>
<span class="review-names">– Roxane B.</span></li>
</ul>
</section><!-- Reviews section ends-->
JS
// ******************************** ANIMATED SCROLLING ********************************
$('#navbar ul li a').bind('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $(this.hash).offset().top -190
}, 300);
// edit: Opera requires the "html" elm. animated
});
Here is the live site link /
This is the first time I'm using bootstrap scroll spy so I'm not sure If I'm doing something wrong. (Well obviously I'm) Here is the problem(s). I had to use an offset of -190 so the bottom of the red nav bar sits where the section starts. Once I apply the offset it's not highlighting (active estate) that section on the main nav. It highlights the section before until I scroll down.
Also I don't seem to find a way to attach a link to go all the way up. Since it has to go after the main nav. Where do I put the #home ID?
Here is the code: Please note that I'm not copying the whole HTML since it's really long but I'm also attaching the live link.
<header id="global-header">
<div class="header-cont-info"> Call to schedule your <span class="yellow uppercase">free,</span> no obligation assessment: <span class="yellow">407–844–1182 </span></div>
<!-- Main nav-->
<nav id="navbar">
<h1 class="visuallyhidden">Main navigation</h1>
<ul class="nav">
<li class="home-mn-btn active"><a href="#home">Home</a></li>
<li class="services-mn-btn"><a href="#services">Services</a></li>
<li class="reviews-mn-btn"><a href="#reviews-section">Reviews</a></li>
<li class="tp-logo"><img src="img/tidy-pools-logo.png" width="332" height="194" alt="Tidy Pools Logo"></li>
<li class="faq-mn-btn"><a href="#faq">Faq</a></li>
<li class="contact-mn-btnn"><a href="#contact-section">Contact</a></li>
<li class="portal-mn-btn"><a href="#">Customer Portal</a></li>
</ul>
</nav><!-- Main nav ends-->
</header>
<!-- Services section-->
<div class="section-dividers-dark"><!--It contains the bottom shadow-->
<section id="services"><!--Ribbon ends-->
<p><a href="#" class="buttons yellow-buttons fancybox"><span class="modern-pictogram">W</span> View Pictures of Our Work</a></p>
<div class="clear-fix"></div>
<!-- Residential Pool and Spa Maintenance section-->
<section>
<header>
<h2>Residential Pool and Spa Maintenance</h2>
<p>Enjoy prehensive weekly service for only $80/month, including:</p>
</header>
<ol>
<li><h3>Cleaning And Debris Removal</h3>
<ul>
<li> Skim surface and bottom of pool</li>
<li>Brush interior surfaces and steps</li>
<li>Clean tile</li>
<li>Vacuum and clean deck as necessary</li>
</ul>
</li>
<li><h3>Water Quality Assurance</h3>
<ul>
<li>Test water and balance</li>
<li>Add necessary chemicals</li>
</ul>
</li>
<li><h3>Equipment Maintenance</h3>
<ul>
<li>Empty baskets</li>
<li>Clean filter</li>
<li>Check equipment functioning</li>
</ul>
</li>
</ol>
</section><!-- Residential Pool and Spa Maintenance section ends--><br>
<!-- Commercial Pool Maintenance section-->
<section>
<h2>Commercial Pool Maintenance</h2>
<p>We offer affordable mercial service as well.<br>
Simply call and we’ll be happy to provide you<br>
with a customized quote for your property’s needs.</p>
</section><!-- Commercial Pool Maintenance section ends-->
<!-- Water Recovery Services section-->
<section>
<h2>Water Recovery Services</h2>
<p>For green pool/water recovery services,<br>
simply call for your free quote!</p>
</section><!-- Water Recovery Services section ends-->
</section>
</div>
<!-- Services section ends-->
<!-- Reviews section-->
<!-- Section dividers. These expand 100% and are used to separate the sections-->
<div class="section-dividers" id="reviews-section">
<!-- Section inner wrappers. These contain the section max-width-->
<div class="section-inner-wrapper">
<section id="reviews">
<header><!--Ribbon ends-->
<p><span class="dark-blue">See what our valued customers have to say about Tidy Pools quality swimming pool cleaning and maintenance service.</span><span class="yellow"> This is just a sample of the kind testimonials we have received, and we look forward to adding yours!</span></p>
</header>
<ul id="people-reviews">
<li>“ I have had pools for 27 years. Tidy Pools is the most professional, honest and reliable pany I’ve had work for me! Your integrity makes me smile and you’ve always been so fair. Thank you. ” <br>
<span class="review-names">– Roxane B.</span></li>
<li>“ I have had pools for 27 years. Tidy Pools is the most professional, honest and reliable pany I’ve had work for me! Your integrity makes me smile and you’ve always been so fair. Thank you. ” <br>
<span class="review-names">– Roxane B.</span></li>
<li>“ I have had pools for 27 years. Tidy Pools is the most professional, honest and reliable pany I’ve had work for me! Your integrity makes me smile and you’ve always been so fair. Thank you. ” <br>
<span class="review-names">– Roxane B.</span></li>
</ul>
</section><!-- Reviews section ends-->
JS
// ******************************** ANIMATED SCROLLING ********************************
$('#navbar ul li a').bind('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $(this.hash).offset().top -190
}, 300);
// edit: Opera requires the "html" elm. animated
});
Here is the live site link http://tidypools./dev/
Share Improve this question edited Mar 7, 2019 at 16:04 Cœur 38.8k25 gold badges206 silver badges278 bronze badges asked Mar 5, 2013 at 2:33 DanielDaniel 552 silver badges10 bronze badges 8- Where are you setting your scrollspy offset? It defaults to 10. – Marc Commented Mar 5, 2013 at 2:59
- in the js. .top -190 (The -190) – Daniel Commented Mar 5, 2013 at 3:04
-
You sure about that? That sets your animated scrolling's
scrollTop, but I'm not sure that sets scrollspy's top. I don't use Scrollspy, so I'm not sure. But your issue appears to be with where it thinks the top is, so I'd look closely at that. – Marc Commented Mar 5, 2013 at 3:19 - I'm pretty sure. When I take it off it sits on a different place. Take a look. – Daniel Commented Mar 5, 2013 at 3:29
-
Where are you telling your page to use scrollspy at all? According to this Bootstrap link, somewhere you need to define an offset, either through JS options or an HTML
data-offsetattribute. And where's the ponent that's giving you animated scrolling? I see a reference to animated scrolling, but it's not clear what part of the library is providing that feature. Maybe I'm grasping at straws. twitter.github./bootstrap/javascript.html#scrollspy – Marc Commented Mar 5, 2013 at 3:45
1 Answer
Reset to default 6You are not properly setting your data-offset, as described in the Twitter Bootstrap documentation.
You need to fix your <body> tag to something like:
<body data-spy="scroll" data-offset="170" data-target="#navbar">