追従メニューの設定方法

Question

https://www.ablya.com/
ページを下にスクロールした時に、ヘッダーの新着商品、商品一覧、お気に入り、マイページ、カート、検索窓の列をヘッダーに追従するようにしたいのですが、設定方法を教えてください。

Answer

ECマスターズの田中です。

> ページを下にスクロールした時に、ヘッダーの新着商品、商品一覧、お気に入り、マイページ、カート、検索窓の列をヘッダーに追従するようにしたいのですが、設定方法を教えてください。

https://rgalus.github.io/sticky-js/
のような、画面固定用のJavaScriptライブラリを利用してご設定いただけます。

たとえば、
https://cdnjs.com/libraries/sticky-js
上記ページを開いて、
https://ec-masters.gyazo.com/4aad2d12c3f6f298dddcd5a0eeef99d4
上記画像の赤枠部分、 という形のボタンを押してコピーされたタグに、
下記タグを追加して、ページ内に貼り付けていただきますようお願いします。


document.addEventListener("DOMContentLoaded", function(){
var sticky = new Sticky('.fs-p-headerNavBar', {wrap:true});
});

.fs-p-headerNavBar { z-index:10; }

管理画面の構造がわかりかねますが、
HTMLを自由記入できる任意の箇所にご記載の上、動作をご確認願います。

また、自社サイトという性質上、
大規模なリニューアルなど、ページの構造が大きく変更された場合に
動作しなくなる場合がございますことを予めお含みおき願います。