下にスクロール時に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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/03/09 01:58