「jqueryでページ上部で固定」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

jqueryでページ上部で固定

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>jqueryでページ上部で固定</title>
  6. <script href="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  8. <style type="text/css">
  9.   html, body {
  10.     margin:0;
  11.     padding:0;
  12.   }
  13.   
  14.   #head {
  15.     background:#ccc;
  16.     padding:10px 0;
  17.     width: 100%;
  18.   }
  19.   
  20.   .fixed {
  21.     position: fixed;
  22.     top: 0;
  23.     left: 0;
  24.   }
  25. </style>
  27. <script type="text/javascript">
  28.   $(function() {
  29.     var nav = $("#head");
  30.     var navTop = nav.offset().top;
  31.     
  32.     $(window).scroll(function () {
  33.       var winTop = $(this).scrollTop();
  34.       
  35.       if (navTop <= winTop) {
  36.         nav.addClass("fixed")
  37.       }
  38.       else if (winTop <= navTop) {
  39.         nav.removeClass("fixed")
  40.       }
  41.     });
  42.   });
  43.   
  44. </script>
  46. </head>
  47. <body>
  49. <h1>jqueryでページ上部で固定</h1>
  51. <div id="head">
  52.   ヘッダメニュー：スクロールしていくと、ページ上部で固定
  53. </div>
  54. <div>
  55.   本文<br />
  56.   本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />
  57.   本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />
  58.   本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />
  59.   本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />
  60.   本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />
  61.   本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />
  62.   本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />
  63.   本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />
  64.   本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />
  65.   本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />
  66.   本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />
  67.   本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />
  68.   本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />
  69.   本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />
  70.   本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />
  71.   本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />本文<br />
  72. </div>
  74. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  75. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  76. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  77. </div>
  79. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  80. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  81. </div>
  83. </body>
  84. </html>