こんにちは、nishi_talk(@nishi_talk)です。
スクロールの位置やフッターの位置など、いくつかの要素を取得して、その後、特定の条件に基づいてページナビゲーションにクラスを追加または削除する方法をご紹介します。具体的には、スクロール位置が特定の範囲内にある場合にはクラスを追加し、それ以外の場合にはクラスを削除します。
コード
$(window).on("scroll", function() {
documentHeight = $(document).height();
scrollPosition = $(this).height() + $(this).scrollTop();
footerHeight = $("footer").innerHeight();
footerTop = $("footer").offset().top;
pageNaviItem = $(".page_navi");
pageNavi = $(".page_navi").innerHeight();
pageNaviTop = $(".page_navi").offset().top;
scrollPageNaviBottom = pageNavi + $(this).scrollTop() + (pageNaviTop-$(this).scrollTop());
// pageNaviBottomMargin = ($(this).height() + $(this).scrollTop()-(pageNavi+pageNaviTop));
pageNaviBottomMargin = ($(this).height()-pageNavi)/2;
// フッターのボーターを超えたらクラスを付与
if (footerTop <= scrollPageNaviBottom) {
$(".page_navi").addClass('is-stop');
}
if($(".page_navi").hasClass('is-stop')){
if ( scrollPosition < (scrollPageNaviBottom + pageNaviBottomMargin )) {
$(".page_navi").removeClass('is-stop');
}
}
});
こちらのコードはウィンドウのスクロールイベントを検知し、特定の条件下でページのナビゲーション要素にクラスを付与または削除することによって、ユーザーエクスペリエンスを改善しています。
まず、スクロールの位置やフッターの位置など、いくつかの要素を取得しています。その後、特定の条件に基づいてページナビゲーションにクラスを追加または削除しています。具体的には、スクロール位置が特定の範囲内にある場合にはクラスを追加し、それ以外の場合にはクラスを削除しています。
このスクリプトを活用することで、ユーザーがページをスクロールする際に、ページナビゲーションが適切に制御されるようになります。例えば、ページの下部までスクロールした際に、フッターを越えた部分にナビゲーションがある場合、そのナビゲーションに特定のスタイルを適用することができます。
また、特定の条件に基づいてナビゲーションの表示や非表示を切り替えることも可能です。これにより、ユーザーがスクロールによってページの一番下まで移動すると、ナビゲーションが表示されるようになり、一定の閾値以下の位置に戻った場合には再び非表示になるといった動作を実現することができます。
このスクリプトを使用することで、Webサイトのユーザーエクスペリエンスを向上させることができます。ユーザーにとってナビゲーションが常に見えることで、ページ間の移動がスムーズになり、使いやすさが向上します。
まとめ
以上、スクロールイベントを活用したWebサイトのユーザーエクスペリエンス向上方法について解説しました。
スクリプトを使うことで、ページナビゲーションの自動制御や表示非表示の切り替えを実現し、ユーザーがスムーズにサイトを操作できる環境を提供することができます。
さらに、SEOの観点からも効果的であり、サイトの構造を正確に把握しやすくなるため、検索エンジンからの評価も向上するでしょう。Webデザイナーや開発者にとって、このコードの実装はサイトの使いやすさと可読性の向上につながる重要な手法です。
ぜひ、自身のウェブサイトに取り入れてみてください。
