🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
jQuery

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

CSS

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

Q&A

解決済

2回答

3863閲覧

navがスクロール時ついてくる

mikan23

総合スコア13

jQuery

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

CSS

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

0グッド

0クリップ

投稿2021/03/08 09:08

編集2021/03/09 01:54

下にスクロール時にdiv=coronaの部分は残さずnavの部分だけついてくるようにしたいです。
参考にしたサイトはリンク先です。(途中から固定表示の部分)
jQueryはhead内に既に入れています。
色々試したのですがうまく反映されなくて困っています。

※こちらの参考サイトのnav部分は白ですがここを透過させ、通常時もスクロール時も
下のページが透けるようにしたいです。

よろしくお願いします。

<html> <header class="site-header"> <div class="corona"> <a href="#modal-01">新型コロナウイルス対策について </a><nav class="global-nav"> <div class="logo">logo</div> <ul class="menu"> <li>TOP</li> <li>NEWS</li> <li>ABOUT</li> <li>MENU</li> <li>ACCESS</li> </ul> <ul class="sns1"> <li><a href=""><img src="images/instagram.svg" class="instagram" alt="instagram"></li> <li><a href=""><img src="images/twitter.svg" class="twitter" alt="twitter"></li> <li><a href=""><img src="images/facebook.svg" class="facebook" alt="facebook"></li> </ul> </nav> <div class="top">top </div>
.corona { background: yellow; height: 30px; top: 50%; font-size: 1.4rem; line-height: 30px; } .global-nav { background: rebeccapurple; height: 55px; display: flex; opacity: 0.7; } .logo { background: khaki; width: 20%; } .menu { background: lawngreen; width: 80%; display: flex; justify-content: flex-end; align-items: center; } .menu li { font-family: "proxima-nova", "sans-serif"; font-size: 2rem; padding: 0 24px 0 24px; letter-spacing: 0.1em; } .sns1{ background: red; width: auto; display: flex; align-items: center; padding-right: 15px; } .sns1 img{ height: 20px; width: 20px; padding: 0 15px 0 15px; } .top{ background: blue; height: 300px; }

リンク内容

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

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

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

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

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

guest

回答2

0

今なら、position: sticky; を使えば、jQueryなしに同様のことが実現できます。

position: sticky;の仕組みや実際の使い方をやさしく解説 | コリス

HTML構造を少し変更して、CSSを2行追加するだけです。

html

1<div class="corona"> 2 <a href="#modal-01">新型コロナウイルス対策について 3 </a> 4</div> 5<nav class="global-nav"> 67</nav> 8<header class="site-header"> 910</header> 11<main> 12</main>

css

1.global-nav { 2 background: rebeccapurple; 3 height: 55px; 4 display: flex; 5 opacity: 0.7; 6 position: sticky; /* 追加 */ 7 top: 0; /* 追加 */ 8 }

CodePenサンプル

投稿2021/03/08 09:56

編集2021/03/09 01:08
hatena19

総合スコア34073

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

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

mikan23

2021/03/09 01:58

ご提案ありがとうございます。 stickyの追加してみたのですがスクロール時についてこないままでした。 多分私の書いた他のコードが何か邪魔して反映されていないのかと思いますが。。。 他の方の方法でできたため、今回はそちらを使ってみることにしました。 ご提案いただきありがとうございました。
guest

0

ベストアンサー

画面上部に固定したい要素にposition: fixed;とするとスクロールしてもついてきます。
背景を透明にするのはbackground: transparent;を設定してあげてください。

注意点
position: fixed;を設定してあげると今のレイアウトが多少崩れます。
修正できない場合はお声がけいただければと思います。

投稿2021/03/08 09:41

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

mikan23

2021/03/08 11:32

ご回答ありがとうございます。 fixedは試してみたのですが一番上のdiv分空いてしまいます。 ※写真追加しました。 スクロールした際にこの隙間がなくなり、上にnavが移動して欲しいです。
退会済みユーザー

退会済みユーザー

2021/03/08 12:07

CSSだけですとコロナのdivがあるので難しいですね。jQueryを使うといいかもしれません。 1.スクロールした量を取得する 2.コロナのdivの高さよりも大きくなったらnavに`top:0;`を付ける
mikan23

2021/03/08 13:55

すみません、jQueryあまりわからないのですが該当するコードをネットから拾ってきました。 amiya-seさんがおっしゃっている1、2はどこに当てはまるのでしょうか? お手数をおかけして申し訳ないのですがお分かりでしたら教えていただけますでしょうか? よろしくお願い致します。 https://webdesignday.jp/inspiration/technique/css/4166/ (途中から固定表示項目) var _window = $(window), _header = $('.site-header'), heroBottom; _window.on('scroll',function(){ heroBottom = $('.hero').height(); if(_window.scrollTop() > heroBottom){ _header.addClass('fixed'); } else{ _header.removeClass('fixed'); } }); _window.trigger('scroll');
退会済みユーザー

退会済みユーザー

2021/03/08 14:41

おー、拾ってこられたんですね。じゃあ僕が書いたサンプルを下に貼っておきます。 $(function() { $(window).scroll(function() { var scroll = $(this).scrollTop(); if (scroll > 30) { $('.global-nav').css('top',0); } else { $('.global-nav').css('top',30); } }); }); 貼っていただいたコードですが、この辺りが1と2になります。 CSSを当てるためのclassが用意されているみたいですね。 if(_window.scrollTop() > heroBottom){ _header.addClass('fixed'); 貼っていただいたコードの中身は、 「画面上部の画像の底の位置を取得して、そこをスクロール量が超えたらヘッダーをfixedにする」 「逆向きにスクロールして、画像の底の位置よりも上に行ったらヘッダーを戻す」 という処理をするものになります。 僕が書いたコードは30という数字で固定してしまっているので、 ずれるようでしたら数字を調整してくださいね。 もしくは貼っていただいたコードをよく見て僕の書いたコードと比較し、 コロナ対策の底の位置を取得するように書き換えてみてください。
mikan23

2021/03/08 14:58

わざわざ記述ありがとうございます。 30というのは一番上のdivのheightのことですよね? ぴったりくっついてくれました!本当にありがとうございます!! ちなみにposition: fixed;を設定したら写真1枚目のようにずれてしまったのですが(消すと2枚目のように理想の形に戻ります) これはどこをいじったら良いのでしょうか? 何度も申し訳ございませんが、もし原因お分かりでしたらよろしくお願いします、、、。
退会済みユーザー

退会済みユーザー

2021/03/09 00:08

> 30というのは一番上のdivのheightのことですよね? その認識で合っています。 > ちなみにposition: fixed;を設定したら写真1枚目のようにずれてしまったのですが .global-navに`max-width: 100vw;`を当てて、 .logoと.menuのwidthを`20vw`と`80vw`のように単位を変更してあげると良いかもしれません。 100vw←画面幅いっぱいという意味になります。 ※スクロールバーも含むのでその点だけご注意下さい。僕は99vwとか調節して使うことが多いです※ 以下蛇足です。 恐らく「SNSのwidthも合わせると100vw超えちゃうけど、 なぜ画面外にはみ出さないの?」という疑問が湧くかと思います。 これはnavにdisplay:flex;が設定されている為、幅の自動調節が行われているからです。 sns1のwidthがautoになっていますが、ここを〇〇vwとすると、 logoやmenuとの比率に応じた幅を取ろうとします。 ※注意点としてブラウザのデフォルトstyleをリセットしていないと同じ幅にはなりません。 ブラウザ側が見やすいようにとタグによってpaddingやmarginを予めつけてくれるので、 一例としてaとulだと幅や高さが変わります※
mikan23

2021/03/09 01:54

ご指示いただいた箇所、訂正したところ無事きれいに横いっぱいに広がりました! ご丁寧にありがとうございます。とても感謝しています。 また機会がありましたらよろしくお願い致します。
mikan23

2021/03/09 04:52

すみません、度々申し訳ないのですが 他のjQueryのコードを書く際は今回書いたコードの下に続けて書いてしまって問題ないですか?
退会済みユーザー

退会済みユーザー

2021/03/15 07:13

基本的には問題ないと思います。お返事遅くなりましてすみません。 解決した質問の通知はまとめて既読にしております。 今回はたまたま開いただけなので、別に質問を立てていただいた方が反応できるかと思います。
mikan23

2021/03/17 06:17

わざわざありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問