CRiZLY CRiZLY - 5 months ago 36
jQuery Question

fullPage.js and fixed navigation - want to highlight active page in nav

I'm trying out fullPage.js and want to use a fixed navigation with it.

How can I change the color of the nav anchors so that you can see on what page you actually are?

As I've seen, fullPage.js adds an active class to the section (page) that's active. But how to connect that to my nav a's?

I tried some jQuery, but nothing worked so far. Seems like .css() doesn't override my old values.

Here's what I got:

HTML

html
head
title CSS Test

script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js")

link(href="css/styles.css" rel="stylesheet")

body
nav
a.(href="#page1") B4D455
ul
li
a(href="#page2") Page2
li
a(href="#page3") Page3
li
a(href="#page4") Page4

.main
.section.page1#page1

.section.page2#page2

.section.page3#page3

.section.page4#page4

script(src="js/jquery.easings.min.js")
script(src="js/scrolloverflow.min.js")
script(src="js/jquery.fullPage.js")
script(src="js/main.js")


and my JS

$(document).ready(function() {
$('.main').fullpage();
});

Answer

Since fullpage.js already adds the "active" class to your sections based on your data anchors, you just need to add some CSS code to work with it.

Essentially, something like this:

.your-nav-class a:active {
    background-color: #B4D455;
}

Also, if you are talking about highlighting your navigation menu anchors based on what section you are on, also ensure you utilize fullpage.js's menu option. Here's the example from the docs:

JS:

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    menu: '#myMenu'
});

HTML:

<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
    <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>