How to detect the browser size and change a javascript function control live

Question

I am using fullpage.js (https://github.com/alvarotrigo/fullPage.js) which is a full page slider.

I am not experienced in development but what i'm trying to achieve is that if the browser size is say for example at 640px the fullpage.js function switches the control inside the function from; autoScrolling: true, to autoScrolling: false,

This is what the function looks like;

$(document).ready(function(){

$.fn.fullpage({
    anchors: ['Home', 'Services', 'Portfolio', 'Testimonials', 'Contact'],
    navigation: true,
    navigationPosition: 'right',
    scrollingSpeed: 400,
    autoScrolling: true,
    navigationTooltips: ['Home', 'Services', 'Portfolio', 'Testimonials', 'Contact']
});

});

Reason is that because of the nature of this plugin after the screen is reduced in size my divs and content gets lost because its cuts off so by actioning a different control i can make the smaller devices run natural scrolling of the page without limiting the size in height.

So is there a way or a script that can identify the screen being reduced like a css media query so it would action the javascript if its of a certain breakpoint and then use a different one at a different breakpoint?

I apologize in advance if this is something silly or really obvious to ask this is not my area of expertise (using/writing/reading javascript), but can this be done? Is the logic i'm thinking to achieve such a solution the right way to do it, or is there a much easier way?

Thanks

Answer 1

Something like that? (Not tested)

$( window ).resize(function() {
    var windowWidth = $( window ).width();
    if (windowWidth < 640) {
        $.fn.fullpage.setAutoScrolling(false);
    }
    else {
        $.fn.fullpage.setAutoScrolling(true);
    }
});