Question

我正在尝试使以下功能仅在屏幕尺寸高于1024px时运行。

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

所以我这样做了：

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

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

Answer 1

检查这是否有效..

$(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

这样做：

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

窗口重新调整大小不起作用

2 个答案: