How do I disable jQuery function when screen size is less than 480px?

Question

i have an upload form that is fixed to the top and follows with my scrolling. Now I want to disable this function when it's viewed on a phone.

Here is my script code.

$(window).scroll(function () {
    if ($(window).scrollTop() > 430 && $(window).width() > 480) {
        $('#formwrap').addClass('fixed');
    } else {
        $('#formwrap').removeClass('fixed');
    }
});

Answer 1

use .resize() instead:

$(window).resize(function () {

    ............

}).resize(); //<----this will be fired when dom gets ready.

See .scroll() event looks for scroll but in your case you have to use .resize() because you want to enable/disable some function on basis of screen size and don't forget to trigger that as i mentioned in the answer or you can do.

$(window).resize(); // or
$(window).trigger('resize');

Answer 2

You need $(window).resize()

$(window).resize(function () {.. });

Read Cross-browser window resize event - JavaScript / jQuery

Answer 3

In Jquery

$(window).resize(function () {

//Your function

.. }).resize();;

In CSS

@media only screen and (max-width: 400px) {

    #formwrap{display:none;}

}

Answer 4

try this code :

if(screen.width>=480)
{
    $('#formwrap').addClass('fixed');
} else {
    $('#formwrap').removeClass('fixed');
}