ウィンドウのサイズが変更されたときに作成したいくつかの変数を最新の状態に保つ方法について少し混乱しているため、スクロール関数は正しい値を取得し続けます。基本的に、ユーザーが要素をビューポートの高さの 50% の高さにスクロールすると表示されるメッセージを含む複数の要素があります。これはうまくいきますが、私の問題は、サイズを変更するときにboxHeight, elementOffset, verticalMatch
、スクロール イベントで使用する必要がある値を制御し続ける変数を更新する方法がわからないことです。誰かがこれを解決する方法を説明するのを手伝ってくれるのだろうかと思っていましたか?
私のコードは次のようになります
var windowHeight = $(window).height(),
headerHeight = $('.header').height();
$('.box').each(function (i,e) {
var el = $(e);
var boxHeight = el.height(),
elementOffset = el.offset().top,
verticalMatch = (windowHeight / 2) + (headerHeight / 2) - (boxHeight / 2);
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop(),
distance = elementOffset - scrollTop;
if( distance <= verticalMatch ) {
el.addClass('is-active');
}
});
});
$(window).on('resize', function() {
windowHeight = $(window).height()
elementOffset = $('.box').offset().top;
$('.box').each(function (i,e) {
var el = $(e);
//update boxHeight, elementOffset, verticalMatch
verticalMatch = (windowHeight / 2) + (headerHeight / 2) - (boxHeight / 2);
});
});
JS Fiddle はこちら: http://jsfiddle.net/fm4z7/2/
誰かが私がこれを行う方法を説明できれば、それは素晴らしいことです!