I'm working on a one-page layout and trying to figure out how to make the "Contact Us" section stand out when it's active. I want it to have a blue background like the other links do when clicked and scrolled to.
One idea I had was to make the "Contact Us" section active when the page is scrolled to the bottom. I've been experimenting with some JavaScript code, but so far, it hasn't quite done the trick.
UPDATE:
I'm making progress! I've added some jQuery code and included specific classes in my HTML for the links, however, I've noticed that the "Get A Quote" link doesn't activate until I scroll past it and then back down. Any suggestions on how to fix this?
Revised HTML Code
<li class="quoteive">
<a href="#quote">Get A Quote</a>
</li>
<li class="contactive">
<a href="#contact">Contact Us</a>
</li>
Updated JavaScript Code
$(window).on("scroll", function() {
var scrollHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
$(".contactive").addClass('active');
$(".quoteive").removeClass('active');
}
else {
$(".contactive").removeClass('active');
}
});
Original Code:
(Original CSS and HTML code omitted for brevity)