Fullpage.js + class="Section"

Question

I’m using JS Fullpage to anchor the links, but each Section is 100% high, and sometimes it gets in the way of something in my css, which sometimes gets a larger font size or wrong position. I was wondering if you have anything like fullpage?

This is the Script used

        $(document).ready(function () {
        $('#myContainer').fullpage({
            anchors: ['Start', 'Devices', 'HowWeWork', 'FrequentlyAskedQuestions', 'Contact'],
            menu: '#menu',
            slidesNavigation: true,
            offsetSections: true,
            offsetSectionsKey: 'YWx2YXJvdHJpZ28uY29tX2ZZM2IyWm1jMlYwVTJWamRHbHZibk09MWpN'
        });
    });

I basically wanted you to just anchor the links with the scroll, clicking on the links, or pressing the navigation keys, but with auto height, same as this example: http://alvarotrigo.com/fullPage/examples/mediaqueries.html#anchor3

Obs: I have already used the class fp-auto-height but it didn’t work out the way I want it to. Obs2: if the content is larger than the page, also allow scrolling as this example: http://alvarotrigo.com/fullPage/extensions/scrolloverflow-reset.html#secondPage

Answer 1

In the example you posted yourself it is using this JS to apply fullPage, add the properties scrollOverflow, scrollOverflowReset, to your script to add the overflow.

You can read more in the documentation on Github

    $(document).ready(function() {
        $('#fullpage').fullpage({
            anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage'],
            sectionsColor: ['#475577', '#939FAA', '#4A6FB1', '#323539'],
            menu: '#menu',
            slidesNavigation: true,
            scrollOverflow: true,
            scrollOverflowReset: true,
            scrollOverflowResetKey: 'YWx2YXJvdHJpZ28uY29tXzlRaGMyTnliMnhzVDNabGNtWnNiM2RTWlhObGRBPT14Ykk='
        });
    });