2

I'm using fullpage.js to create my website, and I'm trying to incorporate wow.js and animate.css to create some cool animations. Everything is working fine on desktop, but when I resize the browser to mobile-size, I cannot scroll at all. The animations at the top of my page load, but I cannot scroll at all until I resize to a bigger viewport.

I've tried the 'scrollOverflow: true' on fullpage, but it's not working.

This is what my app.js looks like:

$(document).ready(function() {

wow = new WOW(
    {
        boxClass:     'wow',      // default
        animateClass: 'animated', // default
        offset:       0,          // default
        mobile:       false,      
        live:         true        // default
    }
)
wow.init();

$('#fullpage').fullpage({
    navigation: true,
    navigationPosition: 'left',
    navigationTooltips: ['Home', 'About Me', 'Skills', 'Portfolio', 'Contact', 'Hire Me'],
    resize: false,
    scrollBar: true,
    scrollOverflow: false,

    //RESPONSIVE
    responsiveWidth: 800,
    afterResize: function () {
        if ($(window).width() < 800) {
            //$.fn.fullpage.setAutoScrolling(false);
            var verticalNav = document.getElementById("fp-nav");
            $(verticalNav).hide();
        }
    }
});
});
mattyfew
  • 163
  • 3
  • 17

3 Answers3

0

I've tried the 'scrollOverflow: true' on fullpage, but it's not working.

And... why are you using it? The purpose of it has nothing to do with your problem... so you should turn it off...

Alvaro
  • 40,778
  • 30
  • 164
  • 336
  • Fair enough. I'm just looking for any reason why this would be happening, and I'm not sure how to go about debugging it. – mattyfew Nov 26 '15 at 16:44
  • The fact that you are using `wow` shouldn't suppose any problem for fullpage.js on mobile. Try the site without wow and test if it works ok. If not, then you are doing something very wrong with fullPage.js. – Alvaro Nov 26 '15 at 16:52
0

I figured out the problem....

I had overflow: hidden !important on both my html and body in my CSS. Took them off and they both work now.

Thanks for the help Alvaro!

mattyfew
  • 163
  • 3
  • 17
0

THEY WORK

I am using FullPage.js, scrollOverflow and WOW Animations altogether and they work perfectly fine.

HERE ARE MY SETTINGS

In the HEAD ELEMENT I have these Links

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/jquery.fullPage.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />

And at the bottom before the ending BODY tag I have all these scripts.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/vendors/scrolloverflow.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/jquery.fullPage.min.js"></script>

<script>
    /*** Call function after page has loaded ***/
    $(document).ready(function() {

        /*** Call FullPage.js option ***/
        pageScroll();

        new WOW().init();
        $(window).resize(function() {
            pageScroll();
        });
    });

    /*** FullPage.js Function ***/
    function pageScroll(){
        $('#fullpage').fullpage({
            sectionsColor: ['#06C', '#C06', '#930', '#06C'],
            anchors: ['aa', 'bb', 'cc', 'dd'],
            menu: '.menu',
            navigation: true,
            scrollOverflow: true,
            scrollBar:true,
            fixedElements: '.header',
            paddingTop: '3em',
            slidesNavigation: true,
            paddingBottom: '1em'
        });
    }
</script>

Here is a live working site.

https://cleansites.us/

lupoll88
  • 150
  • 13