スクロールするとposition: fixedで一列に固定にしてtopに戻ると元のデザインにするアニメーションはどのように作るのでしょうか？

2018/09/29 02:36

わかりました。

m.ts10806

2018/09/29 03:07

htmlとCSSはわかけていただいた方がわかりやすいです。コードブロックの冒頭```を```html のように言語名を入れると言語にあわせてハイライトしてくれる（ものもあります）のでご活用ください。あと、このCSSの作りだとSCSSではないですか？コンパイル後のCSSを提示されたほうが回答を得やすくなると思います。

m.ts10806

2018/09/29 03:22

「jQueryで」とありますが提示コードにJavaScriptのコードがありません。まだそこまで手を付けられていないということですかね？

2018/09/30 05:21

画像いただけませんか？

2018/09/30 05:34

画像とはデザインカンプのことでしょうか？

2018/09/30 05:36

<img src="..."> で指定している画像です。レイアウト崩れなどを調査したく。。。

2018/09/30 05:36

今、投稿している画像になります。b67d74a583199e2415adacece6c6ed1d.jpg

2018/09/30 05:42

画像はこちらのファイルに圧縮しました。 http://firestorage.jp/download/6ee8892543012e84e8f14361b374681a69480f9d ダウンロードパスワード xzznyxd4

2018/09/30 05:43 編集

入れ違いで削除しました。

2018/09/30 05:44

こちらでよろしいでしょうか？

2018/09/30 05:45

はい、ありがとうございます。

2018/09/30 05:47

どうぞ宜しくお願い致します。

行動規範の内容に同意します

回答2件

回答依頼をいただきましたが、JQueryの使用経験がないので方針だけ。
（例はJavaScriptで記載しています）
回答文中の関数や処理に関してはブラウザによって動作が異なる場合があります。
実装の際には要検証してください。

方針としては以下のような流れになると思います。

スクロールを検知
スクロール位置を検出
表示の切り替え

スクロールを検知する方法

ウィンドウ（ページ）のスクロール検知はwindow.onscroll()で可能のようです。
要素内のスクロールを検知する場合には[Element].onscroll()です。
※[Element]は要素を示すもので、そのままこの文字を打つわけではないです。

スクロール位置を検出

ウィンドウのスクロール位置はdocument.body.scrollTopでできるようです。
要素内でのスクロール位置はdocument.bodyを[Element]に置き換えてください。

表示の切り替え

複数方法はあると思いますが、JavaScript（JQuery）で上記の判定をした際に
指定した要素の表示非表示を切り替えるようにすればできると思います。

説明しやすい方法だと以下の２つの要素を持っておき、

スクロール位置が0の場合のヘッダー（創業xx年がある方）
スクロール位置が0以外の場合のヘッダー（一列で収まる方）

スクロール位置によってdisplay: blockとdisplay: noneを切り替えれば良いでしょう。
※ blockは一例です。適切なものを選んでください。

投稿2018/10/01 04:20

総合スコア5158

ベストアンサー

本当に命名規則とかお作法に沿ってなくてメンテしにくいコードです。（言い訳:時間なかったので）
雑で申し訳ないですorz

ご参考までに、、、（結構htmlとか、変えてしまって申し訳ないです。元のソースでは動作しなかったので、、、）

html
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5	<meta charset="UTF-8">
6	<meta name="viewport" content="width=device-width, initial-scale=1.0">
7	<meta http-equiv="X-UA-Compatible" content="ie=edge">
8	<title>Document</title>
9	<link rel="stylesheet" href="style.css">
10</head>
11<body>
12	<header>
13		<div class="header-container">
14				<p class="text">創業 50 年、各種制御盤の設計・製作・工事・据付等、お客様のニーズに応えたモノづくりを続けてます。</p>
15				<ul class="tel-wrap">
16						<li class="telIcon"><p><img src="img/tel-icon.png" alt=""></p></li>
17						<li class="tel">
18							<span class="description">電話でお問い合わせ</span><br>
19							<span class="number">055-997-1552</span>
20						 </li>
21						<li class="link">
22							<a class="link" href=""><img src="img/mail-icon.png" alt=""><span>メールお問合わせ</span></a>
23						</li>
24					</ul>
25
26				<div class="header-logo">
27					<h1 class="logo">
28						<a href="" class="header"><img src="img/header-logo.png" alt=""></a>
29					</h1>
30				</div>
31
32				<nav class="nav-menu">
33					<ul class="globalnav">
34						<li class="news"><a href="" data-text="ニュース">NEWS</a></li>
35						<li class="services"><a href="" data-text="事業内容">SERVICES</a></li>
36						<li class="message"><a href="" data-text="メッセージ">MESSAGE</a></li>
37						<li class="company"><a href="" data-text="会社概要">COMPANY</a></li>
38						<li class="history"><a href="" data-text="沿革">HISTORY</a></li>
39						<li class="recruit"><a href="" data-text="求人">RECRUIT</a></li>
40					</ul>
41				</nav>
42		</div>
43	</header>
44
45	<p style="margin:0">
46		<!-- テスト用文章 (emmet で展開) -->
47		<!-- (lorem30+br)*30 -->
48	</p>
49
50	<script src="jquery-3.3.1.min.js"></script>
51	<script src="common.js"></script>
52</body>
53</html>
54

css
1html, body {
2  margin: 0;
3  padding: 0;
4}
5
6header {
7  background-color: #ffffff;
8  width: 100%;
9  overflow: hidden;
10  margin: 0;
11  position: fixed;
12  transition: .2s all ease;
13}
14
15.header-container {
16  left: 50%;
17  transform: translateX(-50%);
18  -webkit-transform: translateX(-50%);
19  margin: 10px;
20  position: relative;
21}
22
23
24.header-container.scrolled {
25  width: calc(100% - 20px);
26}
27
28.text {
29  float: left;
30  transition: .2s all ease;
31  opacity: 1;
32  margin: 5px 0;
33}
34
35.header-container.scrolled .text {
36  height: 0;
37  opacity: 0;
38  visibility: hidden;
39}
40
41.header-logo {
42  clear: left;
43  float: left;
44  transition: .2s all ease;
45}
46
47.header-logo h1 {
48  margin: 20px 0;
49  transition: .2s all ease;
50}
51.header-container.scrolled .header-logo h1 {
52  margin: 0;
53}
54
55ul.tel-wrap {
56  display: block;
57  float: right;
58  margin: 0;
59  padding: 0;
60}
61
62ul.tel-wrap li {
63  display: inline-block;
64}
65
66.header-container.scrolled ul.tel-wrap li.telIcon img {
67  transform: scale(0.7);
68  vertical-align: bottom;
69}
70
71ul.tel-wrap li.tel {
72  font-size: 12px;
73  color: #85312e;
74  padding-right: 15px;
75}
76ul.tel-wrap li.tel .description {
77  transition: .2s all ease;
78}
79.header-container.scrolled ul.tel-wrap li.tel .description{
80  display: none;
81}
82ul.tel-wrap li.tel .number {
83  font-size: 25px;
84  transition: .2s all ease;
85}
86
87ul.tel-wrap li.link a.link {
88  background-color: #85312e;
89  color: #ffffff;
90  font-size: 12px;
91  padding: 12px 25px;
92  position: relative;
93  text-decoration: none;
94  top: -15px;
95  transition: .2s all ease;
96}
97
98.header-container.scrolled ul.tel-wrap li.link a.link {
99  padding: 7px 10px;
100  vertical-align: bottom;
101  top: -9px;
102}
103
104ul.tel-wrap li.link img {
105  display: inline-block;
106  vertical-align: middle;
107  margin-right: 10px;
108}
109
110.header-container.scrolled ul.tel-wrap li.link span {
111  display: none;
112}
113
114.nav-menu {
115  clear: right;
116  float: right;
117  transition: .2s margin-top ease;
118}
119
120.header-container.scrolled .nav-menu {
121  clear: none;
122  margin-top: 5px;
123  margin-right: 20px;
124  padding: 0;
125}
126
127.nav-menu ul.globalnav {
128  margin: 0;
129  margin-top: 12px;
130}
131
132.header-container.scrolled ul.globalnav {
133  padding: 0;
134  transition: .2s all ease;
135}
136
137.nav-menu ul.globalnav li {
138  display: inline-block;
139  width: 95px;
140}
141.nav-menu ul.globalnav li a {
142  position: relative;
143  display: block;
144  font-weight: bold;
145  text-align: center;
146  text-decoration: none;
147  letter-spacing: 1px;
148  color: #393939;
149}
150.nav-menu ul.globalnav li a:hover {
151  color: #85312e;
152}
153.nav-menu ul.globalnav li a span {
154  /* ↓hoverで中央から広がるアニメーション */
155  background-image: linear-gradient(180deg, transparent 90%, #85312e);
156  background-size: 0 100%;
157  background-repeat: no-repeat;
158  background-position: center left;
159  /* 背景の位置をcenter leftで変更できる */
160  transition: background-size 0.6s ease;
161  display: block;
162  text-align: center;
163  margin-left: 30px;
164}
165.nav-menu ul.globalnav li a span:hover {
166  /* ↓hoverで中央から広がるアニメーション */
167  background-size: 100% 100%;
168  transition: 0.5s all ease;
169}
170
171@media screen and (min-width: 1250px) {
172  header {
173    margin: 0;
174    padding: 0;
175  }
176  .header-container {
177    width: 1250px;
178  }
179}
180@media screen and (max-width: 800px) {
181  .text {
182    display: none;
183  }
184  .header-logo img{
185    margin: 15px;
186  }
187  .nav-menu {
188    width: calc(100% - 60px);
189    margin: 0 30px;
190  }
191}
192

javascript
1$(function (){
2	var $win = $(window);
3	var $header = $(".header-container");
4	// var headerHeight = $header.outerHeight();
5	var offsetTop = 200;
6
7	var addClass = "scrolled";
8
9	$win.on("load scroll", function () {
10		if($win.scrollTop() > offsetTop) {
11			$header.addClass(addClass);
12		} else {
13			$header.removeClass(addClass);
14		}
15	});
16});

...というか、一番大事なのはjavascriptのコード部分です。
scrollイベントを受け取ってここでは .scrolled クラスをつけ外ししてます。

アニメーションとかほんとに雑で申し訳ないです。。

投稿2018/10/01 07:58

総合スコア274

2018/10/01 08:16

忙しい中一から制作していただきありがとうございます。今、同じように教えてもらったhtml、css、jQueryのコードを入れ替えたんですが申し訳ありません。スクロールしてもアニメーションになります。どうすればアニメーションになるのでしょうか？

2018/10/01 08:19

なんかエラー出てませんか？

2018/10/01 08:20

エラー出ました。こちらです。 Failed to load resource: net::ERR_FILE_NOT_FOUND

2018/10/01 08:21

これは何でしょか？

2018/10/01 08:26 編集

リソースを読み込むのに失敗した、つまりファイル読み込み失敗エラーです。例えば、jqueryのバージョンが違うのかもしれません。

2018/10/01 09:32

こちらのjQueryはだめなのでしょうか？ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript">

2018/10/01 10:30

エラーがなくなったんですがアニメーションにならないのはなぜでしょうか？

2018/10/01 10:48

_lemon2003_様が回答されているコードでは「header-container」というクラスを持つ要素に対して「scrolled」というクラスを付け外しすることでアニメーションが行われます。 r.baagio10様が飼いたコードのこの２つの文字列の部分を見直してみてください。誤字があると思われます。あとは大丈夫だと思いますが、スクロールできるように全体の要素の高さがないとアニメーションされないのでご注意を。

2018/10/01 11:26

２つの文字列とは <div class="header-top clearfix">と <div class="header-bottom clearfix"> のことでしょうか？

2018/10/01 11:28

「header-container」と「scrolled」です。 HTML, CSS, JQuery３ファイルで使われています。

2018/10/01 11:37

同じように設定したのですが何が原因なのでしょうか？

2018/10/01 11:38

たぶん誤字脱字です

2018/10/01 11:40

間違いを見ていただけませんでしょうか？

2018/10/01 11:41

もしくは意図したアニメーションではないから気付かないのかもしれません

2018/10/01 11:42

質問文を修正して今の状態に更新してください。

2018/10/01 11:44

スクロールしたらアニメーションが実行されるのですが実行されないのはjQueryが正しくないとかでしょうか？

2018/10/01 11:45

質問分を修正とはどうゆうことでしょうか？

2018/10/01 11:51

実行されない原因は様々です。コードを見ずには判断できかねます。間違いを見るにも何もコードがなければわかりません。なので「質問文を修正」して「あなたの書いたコード」を載せてください。

2018/10/01 11:59

かしこまりました。こちらになります。

2018/10/01 12:13

（関係ないと察しますが）css でスタイルがどんどん上書きされていたり、絶対的に長さを指定しているところが多いので、もう一度書き直して問題を洗い出したほうが良いと思います。

2018/10/01 12:24

確認しましたが、途中で指摘した通り「スクロールできる高さがなかった」ことが原因です。 pタグの中に適当に文字を羅列するなりheightを加えるなりでスクロールできるようにして試してください。

2018/10/01 12:25

lorem かなんかで羅列すればどうでしょうか。

2018/10/02 02:23

アニメーションが実装できました。ありがとうございます。スクロールするとheader-containerにscrolledのクラスが付与されてheader-container全体がアニメーションで縮小されるんですね。お聞きしたいのですが、私が作ったhtmlのコードではheader-containerの直下には header-top clearfixとheader-bottom clearfixの親ボックスで囲ったのですがこの設定では同じようなアニメーションにはならないんでしょうか？