ページ途中のナビゲーションがスクロールで上にきたときにそのまま上部固定されて、かつ下まで行くと消えるjs(jQuery)!!!

下記サイト様の合わせ技です。ありがとうございます🙇‍♀️🙇‍♀️

コード

HTML

ナビゲーション等固定したい要素を「id="fixedBox"」で囲む。

<div id="fixedBox">
<!--固定したいナビゲーション等-->
</div>

css

固定されるときにjsで付加される「class="fixed"」に、固定(position: fixed;)と固定位置のcssを書いておく。

.fixed {
    position: fixed;
    top: 0; /*ページ上部の固定する位置*/
    width: 100%;
    z-index: 9999;
}

javascript(jQuery)

HTMLにjQueryを読み込んで設定を記載!(4行目~は「fixedBox.js」とかで別で保存して読み込んでもよい)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
//#fixedBoxを途中から上部に固定する
jQuery(function($) {
  var nav = $('#fixedBox'), //id="fixedBox"を定義
  offset = nav.offset(); //fixedBoxの位置を取得

$(window).scroll(function () {
  if($(window).scrollTop() > offset.top) { //fixedBoxが上部にきたとき
    nav.addClass('fixed'); //class="fixed"を追加する
  } else { //そうじゃないとき
    nav.removeClass('fixed'); //class="fixed"を解除する
  }
});
});

//下まで行くと消える
$(window).scroll(function () {
  var check = window.pageYOffset; //現在のスクロール位置を取得
  var docHeight = $(document).height(); //ページ全体の高さを取得
  var dispHeight = $(window).height(); //表示されている高さを取得

  if(check > docHeight-dispHeight-60){ //消えるときのフッターからの距離を数字で調整※サイトに合わせて変更
    $('#fixedBox.fixed').slideUp(100); //数字が大きいほどゆっくり消える
  }else{
    $('#fixedBox.fixed').slideDown(100); //数字が大きいほどゆっくり出る
  }
});
</script>

上下に並べただけなのであの…たぶん正しい書き方があの…(^ω^)

下まで行くと消えるjsの

$('#fixedBox.fixed').slideUp(100);

ここのslideUpをfadeOut

$('#fixedBox.fixed').fadeOut();

にすると、ふわっと出たり消えたりする。
(slideDownはfadeInにする。)
また、

if($(window).scrollTop() > 100) { 

にすると上から数値分スクロールしたらfixedBoxが表示されるようにできる。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です