Fullpage.js Page Integration

I am trying to implement the fullpage.js plugin into my page. The plugin seems to be working, but I cannot get the navigation links to map to the proper sections. Does anyone have any experience with this?

I am trying to replicate this functionality with my menu.
http://www.jqueryscript.net/demo/jQuery-Plugin-To-Create-Fullscreen-Scrolling-Website-FullPage/index6.html#page1

This is my website:
http://misunderstanding-of-carl-jr.webflow.io/

Here is the share link.
https://preview.webflow.com/preview/misunderstanding-of-carl-jr?preview=75a3c6f3282ef17b6fb7b478148af4fa

Section IDs and custom attribute data-menuanchor of the links don’t match.

I seem to have fallen under the same pit. I have got the fullpage.js working but the anchors do not seem to update have ā€œactiveā€ class when sections change.

Here is the readonly link to my webflow project.
https://preview.webflow.com/preview/uxdeck-fullpage?preview=a1061c787a5a7f58d6cb1bbba670a965
Note: this example above too, does demo how to work the navigation active state.

I have used http://full-page-js.webflow.io/ as base and making changes in style as I go. A huge thanks to @Nir for making and @EvanJones for explaining it.

I have tried all I can, but I do not seem to make any progress for like 6-8 hours now.

@PixelGeek @Nir Any help is truly appreciated. @Nir I am using your clone-able version, its a great help… but can’t seem to fix the navigation dots.

So I got it to work,

The issue was…I defined active class for the anchor element. It turns out that Fullpage.js adds an ā€˜active’ class to ListItem (li) element not and not on the anchor. When I made an active class for li, it worked.

hope this might of help to someone.

We’re you able to get the navigation links to map to the sections correctly? I’m still having trouble with that.

@samliew @codeGeek

I have integrated the fullpage.js script correctly, but cannot figure out why the menu is not mapping to the sections. I’m sure its just s small error somewhere. The data-menuanchor links match up.

Here is the read-only link to my website.

https://preview.webflow.com/preview/misunderstanding-of-carl-jr?preview=75a3c6f3282ef17b6fb7b478148af4fa

@Michael_Messina I am not sure what is wrong with your project. @PixelGeek may help.

You are missing custom attribute data-anchor on the sections. It overrides IDs and hrefs.

Remove all the href/hyperlinks in your links, and remove all the IDs from your sections.

Then do what codeGeek has explained below.

1 Like

@samliew Even with the data-anchors set to match up, the navbar items to not fly down to the sections when clicked after publish.

I really appreciate your help. :slight_smile:

@Michael_Messina I just noticed, as @samliew pointed twice, you are missing the data-anchor on your sections and data-menuanchor on your nav list items.

Your sections should look something like this

<div class="section" data-anchor="firstPage"> Section 1 </div>
<div class="section" data-anchor="secondPage"> Section 2 </div>
<div class="section" data-anchor="thirdPage"> Section 3 </div>
<div class="section" data-anchor="fourthPage"> Section 4 </div>

And your navigation should look similar to this

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

so the way it works is there needs to be 2 way binding. On your sections add data-anchor attribute and give it any value (alphanumeric) I called them p1…p2…p3…

Then do the same to your navigation menu / dots

Note: You need to define the data-anchor for each sections. And define data-menuanchor for each <li>inside the the nav <ul>

Hope this might be of help.

The divs with the data-anchor property are set. You may be looking at the overlay I have over each of the sections with the content in them. Could that be causing trouble?

Also, my nav links do not have the <li> attribute, but they have an <a>. I have tried the same process with a <ul> and the links did not send to the proper sections.

I edited the posts above for clarity. To see how it works, follow all instances of firstPage.

1 Like

So, for me it only worked when I added the <li> element. It did not work on <a> elements for me too.

  1. make a <ul>

  2. make some <li> elements inside it

  3. set each <li> with a data-menuanchor attribute.

  4. make sure data-menuanchor attribute of your <li> matches exactly the same with each corresponding Section’s data-anchor attribute.

  5. Check your custom code (site settings → custom code) it should have the same AnchorNames as you defined for both sections and navs in step 3 and 4.

  6. make sure you set an ID for the <ul> and specify the same in your custom code.

something like this:

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

I guess this should help.

here is a working thing:

http://uxdeck-fullpage.webflow.io/

1 Like

Resolved! Thank you all for all your help @codeGeek @samliew

My sections were not set to ā€œrelativeā€ positioning, which was causing it to arrange inccorectly on the z-axis. This, plus the solutions you’ve posted have solved the issue…

How do I make an active class for my

  • elements?

  • Hi eveyrone. I need help please! I got the Fullpage.js to work, but I can’t get my anchor links to work. I have read and tried everything in this post, but nothing works. the side nav circles work, but I can’t get my main nav links to work. If I deactivate the fullpage.js, they work fine. Also, it is now skipping my second section ā€œoneā€ and recognizing section ā€œtwoā€ as section ā€œoneā€ until I scroll from bottom to top ad then it doesn’t skip that section.

    I can see the ā€œactiveā€ class changes as it should, but the ā€œhomeā€ anchor keeps the ā€œw–currentā€ class regardless of what section I am in.

    Here is the working site: http://carlton-roberts-test.webflow.io
    Here is the preview: https://preview.webflow.com/preview/carlton-roberts-test?preview=7a766987b97586b0408f1e5d39fcd25b

    This is how I have it setup:

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.6/jquery.fullPage.min.js"></script>
    <script>
    $(document).ready(function() {
        $('#fullpage').fullpage({
        	anchors: ['home', 'one', 'two', 'three', 'four', 'about', 'contact'],
    	menu: '.new-menu',
            navigation: true,
            css3: true,
            scrollingSpeed: 700,
            easing: 'easeInOut',
            easingcss3: 'ease',
            bigSectionsDestination: '',
            keyboardScrolling: true,
            navigationPosition: 'right',
            touchSensitivity: 5,
            fixedElements: '.navbar',
            autoScrolling: true,
            fitToSection: false,
            fitToSectionDelay: false,
            scrollBar: false,
            animateAnchor: true,
            loopBottom: false,
            loopTop: false,
            loopHorizontal: true,
            continuousVertical: false,
            continuousHorizontal: false,
            scrollHorizontally: false,
            interlockedSlides: false,
            resetSliders: false,
            fadingEffect: false,
            normalScrollElements: '#somesectionsID',
            scrollOverflow: false,
            scrollOverflowOptions: true,
            normalScrollElementTouchThreshold: 15,
        });
    });
    </script>
    

    @Chavez_Procope check the browser console. They provide hints as to where the script is failing. Also, creating a new thread will more likely to get you help faster, than riding on a question already marked as resolved.