ページの上部にメニュー付きのヘッダー要素があります。下にスクロールすると、ヘッダーが低い高さにアニメーション化されます。上にスクロールして一番上に到達すると、ヘッダーが元のサイズにアニメーション化されます。
しかし、それは完璧には機能していません。何かが起こるまでに2秒かかることもあります。特に上にスクロールして上に到達したとき。パフォーマンスを向上させるためにこのコードを改善する方法はありますか？
// Scroll show menu
$(window).scroll(function(){
scrollPosition = $(this).scrollTop();
if (scrollPosition >= 150) {
$("header").animate({
height: '65px'
});
}
if (scrollPosition <= 100) {
$("header").animate({
height: '130px'
});
}
});
問題は、scrollスクロールされるピクセルごとにイベントが1回発生するためです。したがって、500px下にスクロールすると、350のアニメーションがキューに追加されます。
これを防ぐためstop()に、キュー内の既存のアニメーションをクリアするために使用できます。これを試して：
$(window).scroll(function(){
scrollPosition = $(this).scrollTop();
if (scrollPosition >= 150) {
$("header").stop().animate({
height: '65px'
});
}
if (scrollPosition <= 100) {
$("header").stop().animate({
height: '130px'
});
}
});
@Proxytypeによって提案されたクリーナー液は、およびCSSトランジションを使用することであるaddClassとremoveClassjQueryを使って：
header {
height: 130px;
transition: height 0.3s;
}
header.small {
height: 65px;
}
$(window).scroll(function(){
scrollPosition = $(this).scrollTop();
$("header")[scrollPosition >= 150 ? 'addClass' : 'removeClass']('small');
});
上記の最後の行は、このロジックの要約バージョンです。
if (scrollPosition >= 150) {
$('#header').addClass('small');
}
else {
$('#header').removeClass('small');
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加