在 window 调整大小时停止视差

Question

我想停止移动设备上的视差效果或 window 调整大小。我在下面的代码中使用 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>

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

编辑...

Looks like there's no easy way (anymore) to check with jQuery directly if an event is attached

其实还是可行的。可能不比使用标志更有意义，或者保证在所有情况下都能正常运行，但弄清楚并证明它是可能的很有趣。

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

在 window 调整大小时停止视差

Stop parallax on window resize

jquery

scroll

parallax

window-resize