-
ID:b1ljBx さんの質問

jQueryで質問です。「50pxスクロール毎」に発火する仕組みを悩んでます。
通常のスクロールだけの処理だと、発火する間隔が短か過ぎるので、発火の間隔を空けたいという意味です。

以下のように考えてみてはいるのですが
うまくいきません。。。
そもそもちょっと間違っていると思っているのですが。。。
ご意見・正解、よろしくお願いします。

var oldst;
$(window).on(’scroll’,function(){
var st = $(window).scrollTop();
if(st > oldst+50){
  //やりたい処理
  oldst = st;
 }
}

みんなの回答 4 件

ID:b1ljBx さんの回答

ちなみに、スクロールすると「右足左足が動く2コマのイラスト」が交互に表示されるような事をしようと思ってます。

ID:AcPX2z

これだとstとoldstは常におなじにならないか?

ID:b1ljBx

なんかそんな感じですよね・・・。

ID:2iO9yF さんの回答

setTimeout()で負荷軽減するのが普通。

scroll, resizeイベントの負荷を抑制する

https://w3g.jp/blog/intermittent_event_load_reduce
ID:FLuXf5

これでもうまくいきました。ありがとうございます。
動きのタイミングがすこしばらついたので、今後の参考にさせて頂きます。

ID:RM/iJg さんの回答

CSS
背景パターン1 (pとする)
背景パターン2 (p.activeとする)
+
js
スクロールの位置をとる
スクロール位置/50余0(%使って計算)のとき、
pに$().toggleClassでactiveつけたり外したりする

スクロールすると、そんな感じになる気がします。

ID:FLuXf5

CSSの基本構造は、これに近い感じでやりました。
ただ、この剰余算?の部分をもう少し具体的にご解説いただけませんか?

ID:GANrus さんの回答

var oldst = 0;
でいけるような。あと最後「(」抜けてる。

最終更新日:2015-01-20 (2,579 views)

関連するトピックス

ページ上部に戻る