|
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery、navメニュースクロール後メニュー固定fixed</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-size: 12px; background: #FFF; } header { width: 100%; height: 80px; color: #333; background: #EEE; } header h1 { width: 1000px; margin: 0 auto; padding-top: 30px; font-size: 20px; line-height: 1; } nav { width: 100%; color: #FFF; background: #666; } nav.fixed { position: fixed; left: 0; top: 0; } ul { width: 1000px; margin: 0 auto; overflow: hidden; border-right: 1px solid #ddd; } ul li { width: 199px; padding: 10px 0; border-left: 1px solid #ddd; text-align: center; list-style: none; float: left; } #wrap { height: 1000px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript"> $(function() { //ロード or スクロールされると実行 $(window).on('load scroll', function(){ //ヘッダーの高さ分(80px)スクロールするとfixedクラスを追加 if ($(window).scrollTop() > 80) { $('nav').addClass('fixed'); } else { //80px以下だとfixedクラスを削除 $('nav').removeClass('fixed'); } }); }); </script> </head> <body> <header> <h1>HEADER</h1> </header> <nav> <ul> <li>ホーム</li> <li>会社概要</li> <li>サービス</li> <li>ストア</li> <li>お問い合わせ</li> </ul> </nav> <div id="wrap"> </div> </body> </html> |
jQuery、navメニュースクロール後メニュー固定fixed
jQuery
