屏幕在1024px下运行功能

Question

当屏幕宽度等于或大于1024px

时，我想运行以下功能

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

我尝试添加if($(window).width() >= 1024){

所以它现在看起来像这样：

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

但它不起作用，我做错了什么？

Answer 1

我不确定，但你可以试试。我想你已经使用了resize事件

$(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');