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

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

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

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

2100閲覧

下スクロールで消え、上スクロールで表示されるFixed固定ナビゲーションで思い通りの表示がされない

Tatsurou

総合スコア81

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/09/03 04:14

編集2018/09/04 02:02

やりたい事

ヘッダーをスクロールによって、固定させたり、
表示させたりしたい。

**追記:**やりたい事が実現されているサイトを見つけたので、URLを貼っておきます。
__ https://news.mynavi.jp/article/20180902-yogabook/__

はまっている事

以下のGIF動画のように、
一番、上までスクロール(下まで引っ張る)すると、
ヘッダーが消えてしまう。
https://gifs.com/gif/oQ5MwN
イメージ説明

期待している動作

ページ最上部までスクロールした時に、
ヘッダーが隠れずに、固定されて欲しい

ソース

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>固定ヘッダースクロールでの表示制御設定</title> </head> <body> <style> .header{ position: fixed; top: 0; left: 0; transition: .3s; width: 100%; height: 120px; background: black; z-index: 2; } .header.hide{ transform: translateY(-100%); } </style> <header class="header"> <p style="color: white;">ヘッダー</p> </header> <div style="width: 100%; height: 1200px; background: gray;"> <p>親譲おやゆずりの無鉄砲むてっぽうで小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰こしを抜ぬかした事がある。なぜそんな無闇むやみをしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談じょうだんに、いくら威張いばっても、そこから飛び降りる事は出来まい。弱虫やーい。と囃はやしたからである。小使こづかいに負ぶさって帰って来た時、おやじが大きな眼めをして二階ぐらいから飛び降りて腰を抜かす奴やつがあるかと云いったから、この次は抜かさずに飛んで見せますと答えた。  親類のものから西洋製のナイフを貰もらって奇麗きれいな刃はを日に翳かざして、友達ともだちに見せていたら、一人が光る事は光るが切れそうもないと云った。切れぬ事があるか、何でも切ってみせると受け合った。そんなら君の指を切ってみろと注文したから、何だ指ぐらいこの通りだと右の手の親指の甲こうをはすに切り込こんだ。幸さいわいナイフが小さいのと、親指の骨が堅かたかったので、今だに親指は手に付いている。しかし創痕きずあとは死ぬまで消えぬ。  庭を東へ二十歩に行き尽つくすと、南上がりにいささかばかりの菜園があって、真中まんなかに栗くりの木が一本立っている。これは命より大事な栗だ。実の熟する時分は起き抜けに背戸せどを出て落ちた奴を拾ってきて、学校で食う。菜園の西側が山城屋やましろやという質屋の庭続きで、この質屋に勘太郎かんたろうという十三四の倅せがれが居た。勘太郎は無論弱虫である。弱虫の癖くせに四つ目垣を乗りこえて、栗を盗ぬすみにくる。ある日の夕方折戸おりどの蔭かげに隠かくれて、とうとう勘太郎を捕つらまえてやった。その時勘太郎は逃にげ路みちを失って、一生懸命いっしょうけんめいに飛びかかってきた。向むこうは二つばかり年上である。弱虫だが力は強い。鉢はちの開いた頭を、こっちの胸へ宛あててぐいぐい押おした拍子ひょうしに、勘太郎の頭がすべって、おれの袷あわせの袖そでの中にはいった。邪魔じゃまになって手が使えぬから、無暗に手を振ふったら、袖の中にある勘太郎の頭が、右左へぐらぐら靡なびいた。しまいに苦しがって袖の中から、おれの二の腕うでへ食い付いた。痛かったから勘太郎を垣根へ押しつけておいて、足搦あしがらをかけて向うへ倒たおしてやった。山城屋の地面は菜園より六尺がた低い。勘太郎は四つ目垣を半分崩くずして、自分の領分へ真逆様まっさかさまに落ちて、ぐうと云った。勘太郎が落ちるときに、おれの袷の片袖がもげて、急に手が自由になった。その晩母が山城屋に詫わびに行ったついでに袷の片袖も取り返して来た。</p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> var startPos = 0,winScrollTop = 0; $(window).on('scroll',function(){ winScrollTop = $(this).scrollTop(); if (winScrollTop >= startPos) { $('.header').addClass('hide'); } else { $('.header').removeClass('hide'); } startPos = winScrollTop; }); </script> </body> </html>

codepen

### 調べた事
<検索ワード>
「固定ヘッダー スクロール 消える」
など

<記事>
Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと _ 東京上野のWeb制作会社LIG

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

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

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

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

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

m.ts10806

2018/09/03 04:27

teratailの画像投稿はGIFアニメも大丈夫なはずなので、teratailの画像添付機能を使ってください。
Tatsurou

2018/09/03 04:50

失礼しました。容量の問題でアップできなくて、諦めてしまいました、、汗 先ほど、圧縮をかけて、少し短くしてアップし直しました。
m.ts10806

2018/09/03 05:23

なるほどそういう事情があったのですね。了解です。お手数かけさせてしまいました。
Tatsurou

2018/09/03 05:54

いえいえ、僕もすぐ諦めてしまい、、w GIFだとわかりやすくていいですよね。
guest

回答3

0

ベストアンサー

どれでしょう?

  • 常時固定(普通のfixed)

イメージ説明

  • 最上部到達時のみ表示(わざわざfixedさせる必要性がよく分からない)

イメージ説明
スクロールしていない状態(startPos0)でヘッダーを表示→スクロール量が0より多いとき非表示→if (winScrollTop > 0){$('.header').addClass('hide');}


その他思ったこと

  • height:1200px;は要らない.むしろ上のgifみたいに,要素から文章がはみ出したりする
  • fixedとかabsoluteとかするなら,bodyかなんかにpadding-topをかけた方が良い

現状のおさらい

イメージ説明
現状のコードは,少しでも下方にスクロールすると条件を満たしてしまい,.addClass('hide')が効いてしまう
しかもiOSの場合,デフォルトでバウンスが発生するため,下方スクロールも自動で発生する?
→バウンスを無効にするか,バウンスを考慮した条件文にすれば良いのでは

方法①「バウンス無効化」

css

1html, 2body{ 3 height: 100vh;/*画面縦幅いっぱい*/ 4 overflow: hidden;/*スクロールさせない*/ 5} 6.body-contents{ 7 height: 100%; 8 overflow-x: hidden;/*縦方向のスクロールだけ許可*/ 9}

に,

js

1$(window).on('touchmove.noScroll', function(e) { 2 e.preventDefault(); 3});

ですかね(未検証)

方法②「バウンスを考慮」

Y軸(縦方向:上から下)に沿って,正の値となる移動(スクロール)なら.hideするようにしたい
→やってみた(条件文:「スクロール前とスクロール後の座標の差が正なら実行」)
イメージ説明
最上部に来ているときのみ表示したいなら,スクロール前の値を入れている変数(startPos:start position?)の更新を無くしてしまえば良い.
→__ついやってしまった.とくに何も考えてはいない__
イメージ説明

よく考えたら,これってただ単に書き方変えただけになってるんじゃないだろうか...

方法②「バウンスを考慮」take2

イメージ説明
バウンスしそうな範囲内なら.removeClass('hide')する

もうこれで良くない?

(:3 」∠)

投稿2018/09/03 06:27

編集2018/09/03 15:22
liveasnotes

総合スコア1284

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

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

liveasnotes

2018/09/03 06:30

https://www.takami-labo.com/ これみたいな感じだとすると,もう実現できてる気がするのですが,どのあたりがうまくいっていないのでしょう?
liveasnotes

2018/09/03 06:36

gifのリンク先見てきました スマホだとバウンスしちゃんですね macaron_xxxさんのコードなら解決しそうな気がします
Tatsurou

2018/09/03 09:52

いつも、アドバイスを頂きありがとうございます! まず、以下のサイトは、 PCのみでした。 https://www.takami-labo.com/ デバッグツールではなく、スマホでの表示を確認したところ、 ヘッダーは常時固定となっていました。 > スマホだとバウンスしちゃんですね そうみたいです、、 macaron_xxxさんのコードを試しましたが、 ダメでした、、
Tatsurou

2018/09/03 09:54

> height:1200px;は要らない.むしろ上のgifみたいに,要素から文章がはみ出したりする > fixedとかabsoluteとかするなら,bodyかなんかにpadding-topをかけた方が良い こちらについては、最初、文字を入れなかった為、高さ指定をしておりました。 でも、わかりにくいかなーと思い、文字を入れたので、 今は高さは不要になったのですが、残っちゃってました。 padding-topについては、ヘッダー分、必要ですよね。
liveasnotes

2018/09/03 14:33

一応聞いておきたいんですけど, ①最上部に着いたときだけヘッダーが出るようにしたい(既出) ②上方向にスクロールしたときだけヘッダーが出るようにしたい(いま思いついた) どちらでしょう?
Tatsurou

2018/09/04 01:59

ご回答ありがうとございます!! 方法①、方法② 、方法② take2 全て試しました。 方法2か、2のtake2、どちらでも問題なさそうなので、 いずれかを採用させていただきます。 助かりましたー。。泣 ご質問についてですが、(2)がやりたい事です。 ただ、最上部にきた時は必ずヘッダーが出て欲しいです。 今回は、バウンスしてしまって、それが実現できませんでした。 今朝、やりたい事が実現されているサイトを見つけました。 ヘッダーの消えるスピードが異なりますが、 URLを貼っておきます。 https://news.mynavi.jp/article/20180902-yogabook/
guest

0

startPos = winScrollTop;
これがいらないのではないでしょうか?

投稿2018/09/03 04:26

drunkdoll

総合スコア128

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

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

Tatsurou

2018/09/03 04:52

ご回答ありがとうございます! startPos・・・の一行を削除すると、 下スクロールの時にヘッダーが戻ってこなくなりました。。
drunkdoll

2018/09/03 04:59

やられたいことを整理すると下記のどれになりますか? 1.固定していたヘッダーを、スクロールすると非表示にする 2.非表示にしていたヘッダーを、スクロールすると固定ヘッダーとして表示する 3.それ以外
Tatsurou

2018/09/03 05:05

整理すると、 最初の表示は、ヘッダーが表示される。 次に、下スクロールで、ヘッダーが非表示となる。 逆に上スクロールで、ヘッダーが再表示される。 上記がやりたい事です。 ただ、上スクロールで表示されるが、 最上部までいくと、跳ね返るような感じで、 ヘッダーが見えなくなってしまいます。 実機だとわかりやすいかもしれません。 一応、GIF画像を追加しましたので、 ご確認頂けると幸いです
drunkdoll

2018/09/03 05:12

下記のような感じでかかれているようなので、ご参考ください    var w = window; var d = document.documentElement; var t = target || document.getElementsByTagName("body")[0]; var currentX = w.pageYOffset || d.scrollTop; var currentY = w.pageXOffset || d.scrollLeft; function onScroll() { var y = w.pageYOffset || d.scrollTop; if (y > currentY) { // move down if (!t.classList.contains("scroll-down")) { t.classList.remove("scroll-up"); t.classList.add("scroll-down"); } if (document.documentElement.scrollHeight - window.innerHeight === y) { t.classList.add("scroll-y-end"); } } else { // move up if (!t.classList.contains("scroll-up")) { t.classList.remove("scroll-down"); t.classList.remove("scroll-y-end"); t.classList.add("scroll-up"); } } if (60 > currentY) { t.classList.remove("scroll-down"); t.classList.remove("scroll-y-end"); t.classList.add("scroll-up"); } //currentX = x; currentY = y; } w.addEventListener("scroll", onScroll, false); onScroll();
Tatsurou

2018/09/03 05:56

参考サイトをお送りいただき有難うございます。 ただ、こちら、PCのみで、 スマホの場合、終始、固定でした。 なので、ちょっと実現したい事と違うかと思います。
drunkdoll

2018/09/03 08:14

iphoneとandroidを考慮する必要はあると思いますが、pcとspはほとんど同じですよ
Tatsurou

2018/09/03 09:49

いえ、スマホで見ると、ヘッダーを固定されているので、完全なレスポンシブデザインではないようです。PCダケ、スクロールに応じて、ヘッダーの表示の制御をしているようです。
guest

0

Javascript

1if (winScrollTop > startPos) { 2 $('.header').addClass('hide'); 3} else { 4 $('.header').removeClass('hide'); 5}

こうやって、winScrollTop = startPostのときはhideにしなければ…できないですかね?

投稿2018/09/03 06:30

macaron_xxx

総合スコア3191

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

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

Tatsurou

2018/09/03 09:59

ご回答いただき有難うございます。 試しましたが、やはり、バウンス?してしまい、ヘッダーが隠れてしまいます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問