Question

我想停止移动或窗口调整大小的视差效果。我正在使用jQuery来实现下面代码的视差效果。我无法弄清楚如何做到这一点。

$(window).scroll(function(e){
  parallax();
});

function parallax(){
  var scrolled = $(window).scrollTop();
  $('.background').css('top',-(scrolled*0.0100)+'rem');
  $('.home-heading').css('top',-(scrolled*0.0100)+'rem');
  $('.page-banners').css('top',-(scrolled*0.0100)+'rem');
  $('.header-text > h1').css('top',-(scrolled*-0.510)+'rem');
};

感谢任何帮助。

Answer 1

你可以使用 $（window）.width（）; ..这样的事情

$(window).on('scroll resize',function(e){
     if($(this).width() > 960){ // change 960 to any width you want
         parallax();
     }  
});

Simple demo

Answer 2

我认为最优化的方法是根据屏幕宽度完全添加或删除事件监听器 - 使用命名空间可以防止它干扰其他脚本：

Demo

$(function() {

var gate = $(window);

check();

gate.resize(check);

function check() {

  gate.off('scroll.parallax');

  if (gate.width() > 1024) gate.on('scroll.parallax', parallax);
}

function parallax() {

  // scroll code
}
});

这种方式更改非常有用 - 在功能已被激活时低于所需的宽度。

在实践中可能不是非常必要但是这里的变体只会附加或删除一次事件监听器，具体取决于它是否已经存在。看起来没有简单的方法（不再）如果附加了一个事件就直接用jQuery检查，这样一个好的旧标志就可以完成这项工作：

$(function() {

var gate = $(window), attached;

check();

gate.resize(check);

function check() {

  if (gate.width() > 1024) {
  if (!attached) {
    gate.on('scroll.parallax', parallax);
    attached = true;
  }
  }
  else if (attached) {
    gate.off('scroll.parallax');
    attached = false;
  }
}

function parallax() {

  // scroll code
}
});

<p>
 No active snippet present, just here to minimise the post.</br>
 Code could be pasted into demo available above.
</p>

不太优雅，但仅仅是为了完整。

编辑...

如果附加了一个事件，看起来没有简单的方法（不再）直接检查jQuery

实际上，它仍然可行。可能没有比使用旗帜更有意义，或者保证在所有情况下都能正常运行，但是弄清楚并展示它是有趣的。

$(function() {

var gate = $(window);

check();

gate.resize(check);

function check() {

  var handlers = $._data(gate[0]).events;

  if (handlers && handlers.scroll)
  var attached = handlers.scroll[0].namespace == 'parallax';

  if (gate.width() > 1024) {
  if (!attached) gate.on('scroll.parallax', parallax);
  }
  else if (attached) gate.off('scroll.parallax');
}

function parallax() {

  // scroll code
}
});

<p>
 No active snippet present, just here to minimise the post.</br>
 Code could be pasted into demo available above.
</p>

在窗口大小调整时停止视差

2 个答案: