ナビゲーションが途中から固定されて最下部で消えるjavascript（jQuery） | Palette

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

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

画面をスクロールさせて、指定した要素がトップの位置に来た時に固定表示させる方...

http://ooigawa-bitter-sweet.hatenablog.com/entry/2013/11/28/230000

画面をスクロールさせて、指定した要素がトップの位置に来た時に、トップに固定表示させる方法をまとめておきます。グローバルナビやサイドバーをはじめ、ページ途中にある要素を固定配置させたい時に便利です。作業内容は以下の三箇所です。 ● htmlのhead内にjQuery本体と各ファイルを読み込ませて、スクリプトを記述 ● body内の固定したい要素に「id=”fixedBox”」を設定 ● 固定するための設定をcssに記述以下で細かく見ていきます。画面をスクロールさせて、指定した要素がトップの位置に来た時に固定表示させる方法 1. まずhtml...

面白いを追及するWEB制作集団 -Memorynator-

【コピペOK】フッターまで行ったら消えるor表示するjavascript | ホームページ・ウ...

https://memorynator.com/sidestory/homepage-story/footer-display/

早速ソースコード。上記のソースコードはフッターから500px以内になった場合、class=

コード

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が表示されるようにできる。

コード

HTML

css

javascript（jQuery）

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル