質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1860閲覧

jQuery:ナビゲーションを途中で固定、フッター前で非表示にする方法

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/12/20 15:06

編集2017/12/21 10:33

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2017/12/21 00:25

htmlのサンプルは付加できますか?
guest

回答2

0

ベストアンサー

<script> // ページの読み込みが完了してから実行 $(function() { // スクロール途中から表示したいメニューバーを指定 var navBox = $(".nav-sticky"); // メニューバーは初期状態では消しておく navBox.hide(); // 表示を開始するスクロール量を設定(px) var TargetPos = 500; // スクロールされた際に実行 $(window).scroll( function() { // 現在のスクロール位置を取得 var ScrollPos = $(window).scrollTop(); var topOffset = $('section.fadeout').offset().top; // 現在のスクロール位置と、目的のスクロール位置を比較 if( ScrollPos > topOffset ){ // 非表示(フェイドアウト) navBox.fadeOut(); } else if( ScrollPos > TargetPos ) { // 表示(フェイドイン) navBox.fadeIn(); } else { // 非表示(フェイドアウト) navBox.fadeOut(); } }); }); </script>

投稿2017/12/22 06:07

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

JavaScript

1 if (document.querySelector('section.fadeout').getBoundingClientRect().top < window.innerHeight) { 2 // 非表示(フェイドアウト) 3 navBox.fadeOut(); 4 } else { 5 // 現在のスクロール位置を取得 6 var ScrollPos = $(window).scrollTop(); 7 // 現在のスクロール位置と、目的のスクロール位置を比較 8 if( ScrollPos > TargetPos ) { 9 // 表示(フェイドイン) 10 navBox.fadeIn(); 11 } 12 }

スクロールで処理するのは引っ掛かりの原因になるので、要件が許せばIntersectionObserverにするのをお勧めします。
https://developer.mozilla.org/ja/docs/Web/API/IntersectionObserver

投稿2017/12/21 05:31

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問