窗口调整大小不起作用

Question

I am trying to make the function below only run when the screen size is above 1024px .

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

So I did this:

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

But it is not working! what I am doing wrong?

Answer 1

Check if this works..

$(document).ready(function() {

 var divs = $('.fader');

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

  $(window).resize(function(){
     var width = $(window).width();
     scroll(width);
   });  
});

Answer 2

Do this:

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