jQueryでスティッキーのナビゲーションを作成しています。
スクロールして500pxくらいの位置で表示、フッター前で非表示したいです。
スクロール途中で表示させることができましたが、フッター前で非表示にする方法がわからないです。
よろしくお願いいたします。
現在のコードは下記です。
jQuery
1<script> 2 // ページの読み込みが完了してから実行 3 $(function() { 4 // スクロール途中から表示したいメニューバーを指定 5 var navBox = $(".nav-sticky"); 6 7 // メニューバーは初期状態では消しておく 8 navBox.hide(); 9 10 // 表示を開始するスクロール量を設定(px) 11 var TargetPos = 500; 12 13 // スクロールされた際に実行 14 $(window).scroll( function() { 15 // 現在のスクロール位置を取得 16 var ScrollPos = $(window).scrollTop(); 17 // 現在のスクロール位置と、目的のスクロール位置を比較 18 if( ScrollPos > TargetPos ) { 19 // 表示(フェイドイン) 20 navBox.fadeIn(); 21 } 22 else { 23 // 非表示(フェイドアウト) 24 navBox.fadeOut(); 25 } 26 }); 27 }); 28 </script>
html追記します。
フッター前のfadeoutというsectionに来たらnavを非表示にしたいです。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width"> 6<title>Stikcy or change header and navigation when scrolling using jQuery #1</title> 7<style> 8 /* page style */ 9 * { 10 margin: 0; 11 padding: 0; 12 box-sizing: border-box; 13 } 14 header { 15 position: relative; 16 height: 200px; 17 background: #3498db; 18 } 19 nav { 20 height: 100px; 21 background: #f1c40f; 22 } 23 main { 24 padding: 120px 20px; 25 background: #ecf0f1; 26 } 27 section { 28 max-width: 960px; 29 height: 1000px; 30 margin: 0 auto; 31 background: #fff; 32 box-shadow: 0 0 30px rgba(0,0,0,.1); 33 } 34 section + section { 35 margin-top: 120px; 36 } 37 footer { 38 height: 500px; 39 background: #2c3e50; 40 } 41 .fadeout{ 42 background:#3498db; 43 } 44 /* demo style */ 45 .is-fixed { 46 position: fixed; 47 top: 0; 48 left: 0; 49 z-index: 2; 50 width: 100%; 51 } 52</style> 53</head> 54<body> 55 <header></header> 56 <nav class="nav-sticky is-fixed"></nav> 57 <main> 58 <section></section> 59 <section></section> 60 <section></section> 61 <section></section> 62 <section class="fadeout"></section> 63 </main> 64 <footer></footer> 65 66 67<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 68 <script> 69 // ページの読み込みが完了してから実行 70 $(function() { 71 // スクロール途中から表示したいメニューバーを指定 72 var navBox = $(".nav-sticky"); 73 // メニューバーは初期状態では消しておく 74 navBox.hide(); 75 // 表示を開始するスクロール量を設定(px) 76 var TargetPos = 500; 77 // スクロールされた際に実行 78 $(window).scroll( function() { 79 // 現在のスクロール位置を取得 80 var ScrollPos = $(window).scrollTop(); 81 // 現在のスクロール位置と、目的のスクロール位置を比較 82 if( ScrollPos > TargetPos ) { 83 // 表示(フェイドイン) 84 navBox.fadeIn(); 85 } 86 else { 87 // 非表示(フェイドアウト) 88 navBox.fadeOut(); 89 } 90 }); 91 }); 92 </script> 93</body> 94</html>
htmlのサンプルは付加できますか?
回答2件
あなたの回答
tips
プレビュー