Q&A
ご回答ありがとうございます。
fixedは試してみたのですが一番上のdiv分空いてしまいます。
※写真追加しました。
スクロールした際にこの隙間がなくなり、上にnavが移動して欲しいです。
下にスクロール時に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; }
回答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"> 6 略 7</nav> 8<header class="site-header"> 9 略 10</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 }
投稿2021/03/08 09:56
編集2021/03/09 01:08
総合スコア34073
0
ベストアンサー
画面上部に固定したい要素にposition: fixed;とするとスクロールしてもついてきます。
背景を透明にするのはbackground: transparent;を設定してあげてください。
注意点
position: fixed;を設定してあげると今のレイアウトが多少崩れます。
修正できない場合はお声がけいただければと思います。
投稿2021/03/08 09:41
退会済みユーザー
総合スコア0
CSSだけですとコロナのdivがあるので難しいですね。jQueryを使うといいかもしれません。
１．スクロールした量を取得する
２．コロナのdivの高さよりも大きくなったらnavに`top:0;`を付ける
すみません、jQueryあまりわからないのですが該当するコードをネットから拾ってきました。
amiya-seさんがおっしゃっている１、２はどこに当てはまるのでしょうか？
お手数をおかけして申し訳ないのですがお分かりでしたら教えていただけますでしょうか？
よろしくお願い致します。
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');
おー、拾ってこられたんですね。じゃあ僕が書いたサンプルを下に貼っておきます。
$(function() {
$(window).scroll(function() {
var scroll = $(this).scrollTop();
if (scroll > 30) {
$('.global-nav').css('top',0);
} else {
$('.global-nav').css('top',30);
}
});
});
貼っていただいたコードですが、この辺りが１と２になります。
CSSを当てるためのclassが用意されているみたいですね。
if(_window.scrollTop() > heroBottom){
_header.addClass('fixed');
貼っていただいたコードの中身は、
「画面上部の画像の底の位置を取得して、そこをスクロール量が超えたらヘッダーをfixedにする」
「逆向きにスクロールして、画像の底の位置よりも上に行ったらヘッダーを戻す」
という処理をするものになります。
僕が書いたコードは30という数字で固定してしまっているので、
ずれるようでしたら数字を調整してくださいね。
もしくは貼っていただいたコードをよく見て僕の書いたコードと比較し、
コロナ対策の底の位置を取得するように書き換えてみてください。
わざわざ記述ありがとうございます。
30というのは一番上のdivのheightのことですよね？
ぴったりくっついてくれました！本当にありがとうございます！！
ちなみにposition: fixed;を設定したら写真１枚目のようにずれてしまったのですが（消すと2枚目のように理想の形に戻ります）
これはどこをいじったら良いのでしょうか？
何度も申し訳ございませんが、もし原因お分かりでしたらよろしくお願いします、、、。
> 30というのは一番上のdivのheightのことですよね？
その認識で合っています。
> ちなみにposition: fixed;を設定したら写真１枚目のようにずれてしまったのですが
.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だと幅や高さが変わります※
ご指示いただいた箇所、訂正したところ無事きれいに横いっぱいに広がりました！
ご丁寧にありがとうございます。とても感謝しています。
また機会がありましたらよろしくお願い致します。
すみません、度々申し訳ないのですが
他のjQueryのコードを書く際は今回書いたコードの下に続けて書いてしまって問題ないですか？
基本的には問題ないと思います。お返事遅くなりましてすみません。
解決した質問の通知はまとめて既読にしております。
今回はたまたま開いただけなので、別に質問を立てていただいた方が反応できるかと思います。
わざわざありがとうございます！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/03/09 01:58