忍者ブログ
手探りでパソコンの事を勉強するブログです。 何か覚えたら記録していきます。
2024 . 04
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  •   

    [PR]



    このエントリーをはてなブックマークに追加
    ×

    [PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

    スクロール追従型のグローバルナビゲーション



    このエントリーをはてなブックマークに追加
    ヘッダー内に記載。


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery(function($) {
     
    var nav    = $('#fixedBox'),
        offset = nav.offset();
     
    $(window).scroll(function () {
      if($(window).scrollTop() > offset.top) {
        nav.addClass('fixed');
      } else {
        nav.removeClass('fixed');
      }
    });
     
    });
    </script>


    追従させたい部分を以下のようにボックスで囲む。


    <div id="fixedBox" class="nav">

    <!--ここにリストタグなんかのグローバルナビを作る-->

    </div>




    CSSは以下のように記載。

    .fixed {
        position: fixed;
        top: 0;
        z-index: 10000;
    }
    PR
    HOME
    ©パソコン手探り all rights reserved.
    Powered by ニンジャブログ  Designed by ピンキー・ローン・ピッグ
    忍者ブログ / [PR]