「jQueryとCSSでメニューなどのスクロールしたらついてくるエリアを作る2」の編集履歴(バックアップ)一覧はこちら

jQueryとCSSでメニューなどのスクロールしたらついてくるエリアを作る2」(2015/12/04 (金) 12:05:35) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

前回記事[[CSSでメニューなどのスクロールしたらついてくるエリアを作る1]]では一番上にある部分をスクロールしてもついてくる状態にしました。 今度は途中にあるメニュー部分などをスクロールしてもついてくる方法について考えていきたいと思います。12月3日記事
前回記事[[CSSでメニューなどのスクロールしたらついてくるエリアを作る1]]では一番上にある部分をスクロールしてもついてくる状態にしました。 今度は途中にあるメニュー部分などをスクロールしてもついてくる方法について考えていきたいと思います。12月3日記事 ~ ~ イメージ ~ スクロールする前 &image(width=350,scroll003.png) スクロールしてnav部分をすぎると? &image(width=350,scroll004.png) こんな感じでナビ部分だけが残る ~ ~ 目次 #contents ~ ~ ---- ~ *コード HTML <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="reset.css"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(function() { var nav_height = $('nav').offset().top; $(window).on('scroll load', function() { var now_height = $(window).scrollTop(); if (now_height >= nav_height) { $('nav').css('position', 'fixed'); } else { $('nav').css('position', 'inherit'); } }); }); </script> <title>途中にあるメニューがスクロールしてもついてくる</title> </head> <body> <header> </header> <nav> <p>ここにリストタグなどを使ってメニューを作る</p> </nav> <div id="wrapper"> <div class="contents"> </div> <div class="contents"> </div> <div class="contents"> </div> </div> </body> </html> CSS @charset "utf-8"; /* CSS Document */ header { width: 100%; height: 200px; background: #FFC; } nav { width: 100%; height: 50px; background: #FCF; top: 0; left: 0; position: inherit; } .contents { width: 100%; height: 400px; background: #CFF; margin-bottom: 30px; } ~ ~ *まとめ navにはfixedした際にその基準となるtopやleftを記述しておくことが重要です。その部分を記載してスクロールした際にも使えるようにしておきましょう。 ~ ~ 以上

表示オプション

横に並べて表示:
変化行の前後のみ表示: