前提・実現したいこと
固定メニューの作り方についてお聞きしたいのですが
こちらはスクロールするとposition:fixedにして表示させ画像のように一列になり
topに上げると元のデザインに変わるアニメーションにしたいのですが
作り方がわかりません。
どのようにhtmlとcssとjQueryで作ればいいのでしょうか?
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <link rel="stylesheet" href="css/style.css"> 9 <style type="text/css"> 10 html, body { 11 margin: 0; 12 padding: 0; 13} 14 15header { 16 background-color: #ffffff; 17 width: 100%; 18 overflow: hidden; 19 margin: 0; 20 position: fixed; 21 transition: .2s all ease; 22} 23 24.header-container { 25 left: 50%; 26 transform: translateX(-50%); 27 -webkit-transform: translateX(-50%); 28 margin: 10px; 29 position: relative; 30} 31 32 33.header-container.scrolled { 34 width: calc(100% - 20px); 35} 36 37.text { 38 float: left; 39 transition: .2s all ease; 40 opacity: 1; 41 margin: 5px 0; 42} 43 44.header-container.scrolled .text { 45 height: 0; 46 opacity: 0; 47 visibility: hidden; 48} 49 50.header-logo { 51 clear: left; 52 float: left; 53 transition: .2s all ease; 54} 55 56.header-logo h1 { 57 margin: 20px 0; 58 transition: .2s all ease; 59} 60.header-container.scrolled .header-logo h1 { 61 margin: 0; 62} 63 64ul.tel-wrap { 65 display: block; 66 float: right; 67 margin: 0; 68 padding: 0; 69} 70 71ul.tel-wrap li { 72 display: inline-block; 73} 74 75.header-container.scrolled ul.tel-wrap li.telIcon img { 76 transform: scale(0.7); 77 vertical-align: bottom; 78} 79 80ul.tel-wrap li.tel { 81 font-size: 12px; 82 color: #85312e; 83 padding-right: 15px; 84} 85ul.tel-wrap li.tel .description { 86 transition: .2s all ease; 87} 88.header-container.scrolled ul.tel-wrap li.tel .description{ 89 display: none; 90} 91ul.tel-wrap li.tel .number { 92 font-size: 25px; 93 transition: .2s all ease; 94} 95 96ul.tel-wrap li.link a.link { 97 background-color: #85312e; 98 color: #ffffff; 99 font-size: 12px; 100 padding: 12px 25px; 101 position: relative; 102 text-decoration: none; 103 top: -15px; 104 transition: .2s all ease; 105} 106 107.header-container.scrolled ul.tel-wrap li.link a.link { 108 padding: 7px 10px; 109 vertical-align: bottom; 110 top: -9px; 111} 112 113ul.tel-wrap li.link img { 114 display: inline-block; 115 vertical-align: middle; 116 margin-right: 10px; 117} 118 119.header-container.scrolled ul.tel-wrap li.link span { 120 display: none; 121} 122 123.nav-menu { 124 clear: right; 125 float: right; 126 transition: .2s margin-top ease; 127} 128 129.header-container.scrolled .nav-menu { 130 clear: none; 131 margin-top: 5px; 132 margin-right: 20px; 133 padding: 0; 134} 135 136.nav-menu ul.globalnav { 137 margin: 0; 138 margin-top: 12px; 139} 140 141.header-container.scrolled ul.globalnav { 142 padding: 0; 143 transition: .2s all ease; 144} 145 146.nav-menu ul.globalnav li { 147 display: inline-block; 148 width: 95px; 149} 150.nav-menu ul.globalnav li a { 151 position: relative; 152 display: block; 153 font-weight: bold; 154 text-align: center; 155 text-decoration: none; 156 letter-spacing: 1px; 157 color: #393939; 158} 159.nav-menu ul.globalnav li a:hover { 160 color: #85312e; 161} 162.nav-menu ul.globalnav li a span { 163 /* ↓hoverで中央から広がるアニメーション */ 164 background-image: linear-gradient(180deg, transparent 90%, #85312e); 165 background-size: 0 100%; 166 background-repeat: no-repeat; 167 background-position: center left; 168 /* 背景の位置をcenter leftで変更できる */ 169 transition: background-size 0.6s ease; 170 display: block; 171 text-align: center; 172 margin-left: 30px; 173} 174.nav-menu ul.globalnav li a span:hover { 175 /* ↓hoverで中央から広がるアニメーション */ 176 background-size: 100% 100%; 177 transition: 0.5s all ease; 178} 179 180@media screen and (min-width: 1250px) { 181 header { 182 margin: 0; 183 padding: 0; 184 } 185 .header-container { 186 width: 1250px; 187 } 188} 189@media screen and (max-width: 800px) { 190 .text { 191 display: none; 192 } 193 .header-logo img{ 194 margin: 15px; 195 } 196 .nav-menu { 197 width: calc(100% - 60px); 198 margin: 0 30px; 199 } 200} 201 202 </style> 203</head> 204<body> 205 <header> 206 <div class="header-container"> 207 <p class="text">創業 50 年、各種制御盤の設計・製作・工事・据付等、お客様のニーズに応えたモノづくりを続けてます。</p> 208 <ul class="tel-wrap"> 209 <li class="telIcon"><p><img src="img/tel-icon.png" alt=""></p></li> 210 <li class="tel"> 211 <span class="description">電話でお問い合わせ</span><br> 212 <span class="number">055-997-1552</span> 213 </li> 214 <li class="link"> 215 <a class="link" href=""><img src="img/mail-icon.png" alt=""><span>メールお問合わせ</span></a> 216 </li> 217 </ul> 218 219 <div class="header-logo"> 220 <h1 class="logo"> 221 <a href="" class="header"><img src="img/header-logo.png" alt=""></a> 222 </h1> 223 </div> 224 225 <nav class="nav-menu"> 226 <ul class="globalnav"> 227 <li class="news"><a href="" data-text="ニュース">NEWS</a></li> 228 <li class="services"><a href="" data-text="事業内容">SERVICES</a></li> 229 <li class="message"><a href="" data-text="メッセージ">MESSAGE</a></li> 230 <li class="company"><a href="" data-text="会社概要">COMPANY</a></li> 231 <li class="history"><a href="" data-text="沿革">HISTORY</a></li> 232 <li class="recruit"><a href="" data-text="求人">RECRUIT</a></li> 233 </ul> 234 </nav> 235 </div> 236 </header> 237 238 <p style="margin:0"> 239 <!-- テスト用文章 (emmet で展開) --> 240 <!-- (lorem30+br)*30 --> 241 </p> 242 243 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 244 <script src="js/common.js"></script> 245</body> 246</html> 247 248```ここに言語を入力 249```jQuery 250$(function (){ 251 var $win = $(window); 252 var $header = $(".header-container"); 253 // var headerHeight = $header.outerHeight(); 254 var offsetTop = 200; 255 256 var addClass = "scrolled"; 257 258 $win.on("load scroll", function () { 259 if($win.scrollTop() > offsetTop) { 260 $header.addClass(addClass); 261 } else { 262 $header.removeClass(addClass); 263 } 264 }); 265});
試したこと
ネットで色々と検索したのですが同じようなサイトの作り方がなかったため
作り方に関してお聞きしたいと思い質問しました。
回答2件
あなたの回答
tips
プレビュー