ユーザーが親divの特定のポイントを超えてスクロールすると、「固定」クラスが追加されるdivがあります。固定クラスは、子 div を絶対配置から固定配置に変更するだけです。
ただし、(js の「begin 変数」で指定されているように)「fixed」クラスが追加されたときに、ユーザーが特定のポイントまでスクロールすると問題が発生します。ユーザーは、数秒間上下にスクロールできなくなります。さらに複雑なことに、この問題は、このコードを使用する 6 つの親 div のうち最初の div でのみ発生します。
「固定」クラスを追加するjqueryコードは次のとおりです。
var begin = 164;
$("#portfolio_window").scroll(function () {
var y = $(this).scrollTop();
if (y >= begin) {
$('.details').addClass('fixed');
} else {
$('.details').removeClass('fixed');
}
});
「begin」変数を 600 などに変更すると、ユーザーは div の上部から 600px 前後スクロールできなくなります。
http://dev.zachboth.com/で問題の再現を試みることができます。
問題を再現できる最も簡単な方法は次のとおりです。
- サファリを使う
- 「作品」欄の「各種ロゴ」をクリック
- 「さまざまなロゴ」セクションが表示されたら、すばやく下にスクロールします
- 実際に問題が発生するまでに数回の試行が必要な場合があります