CODEWITHSUNDEEP
javascriptjquery
user2756554
user2756554

Reputation:

Run function when screen under 1024px

I want to run the following function when screen width is equal or above 1024px

//Fade elements on Scroll
    var divs = $('.fader');
        $(window).on('scroll', function() {
    var st = $(this).scrollTop();
        divs.css({ 'opacity' : (1 - st/300) });
    });

I tried to add if($(window).width() >= 1024){

So its now looks like this: 

var divs = $('.fader');
if($(window).width() >= 1024){
        $(window).on('scroll', function() {
    var st = $(this).scrollTop();
        divs.css({ 'opacity' : (1 - st/300) });
    });
    }

But it did not work, what I am doing wrong?

Upvotes: 0

Views: 67

Answers (1)

Satpal
Satpal

Reputation: 133403

I am not sure but you can try. I think You have use resize event

$(window).on('resize', function () {
    var divs = $('.fader');
    if ($(window).width() >= 1024) {
        $(window).on('scroll', function () {
            var st = $(this).scrollTop();
            divs.css({
                'opacity': (1 - st / 300)
            });
        });
    } else {
        $(window).off('scroll');
    }
}).trigger('resize');

Upvotes: 1

Related Questions