2019.11.23https://mutimutisan.com/wp-content/uploads/2019/11/45ae1a75a65296e05e100814ca307876.mp4このように、最初ヘッダートップにあってスクロールすると消えるけど、再び上からにゅるっと出てくるメニューバー。メニューバーはいつもなんか適当に作ってたので、この機会にちゃんとまとめてみます。href="#contact">Contact</a></li></ul>つるんとしたシンプルなやつです。タグにクラスを2つ当ててるのは、あとでjQueryで使うためです。合わせて、かつ垂直に中央にしようとすると、heightを100%に指定したりline-height/heightを同値で指定したりすると望むようになってくれなくて困りました。幅いっぱいにリンクが押せるメニューバーが出来上がりです。//場合によってフロートナビゲーションの残像が残ることがあったので追記。});});ちょっと長いですが、最初のブロックでは一定までスクロールしたときの「にゅるっと出てくる」アニメーションの位置・動きを指定しています。jQueryで「fixedクラス」を付与し、top:0の指定もできましたが、後ほどcssへも「.fixed」のスタイルを追記しますそして後ろのブロックでは、スクロールが一定まで満たない状態の指定をしています。通常ハイフンでつなぐようなプロパティをanimate関数へ指定する時は、キャメルケースで書くそうです。これで上からにゅるっと降りてくるメニューバーが完成です!上から降りてきたらCSSを変えたいhttps://mutimutisan.com/wp-content/uploads/2019/11/723e38555404e2c01e7981a7c28aea62.mp4こういう感じで、上からスライドダウンしてきた時に見た目を変えたい!というわがまま要望があった場合も追記するだけでいけます。yellow;}先ほどの.fixedはそのままにして、.fixedがついてる場合の.header-nav(ul全体)の背景色を指定。CSSを上書きしてあげます。おまけとして、.fixedがついてるときの1つめのliアイテムにも変化をつけてあげました。そのためにあらかじめ1つめのliにclass=”changeColor”を追記してあります。rgba(0,0,0,0.1);と指定すると下側10pxにぼかし10pxのうっすらシャドウがつきますフロートナビゲーションの残像が・・・?さきほど、後で説明しますと書いたjQueryの最後のコードですが、トップ固定ナビゲーションとフロートナビゲーションの位置が違うページを作っていて、たとえば、トップ固定ナビはヘッダーの上から100pxの位置。フロートナビはfixedのtop:0;だったとします。見の挙動は大丈夫なのですが、フロートナビがちょうど出現するくらいのぎりぎりのところでヘッダーにスクロールして戻ったりするとフロートナビの残像がtop:0;の位置に謎に残っていたことがありまして。最後のコードを追記したら解決しました。無くても動く場合も多いと思いますので、環境によって修正ください。ifの条件が甘いんですかね・・・?ifとelseだけでもいいような気がしてきましたが、それはまた今度考えます。上記のコードとは微妙に異なります。プログラミング初心者のPHPアウトプット作品できました4月からウェブカツ!にてプログラミングを学習しています(女性割引利用)。この2ヶ月半勉強してきて、一番「うぅぅ」と苦しみつつ進めたWEBサービス部。そのアウトプット作品が、やっと出来上がりました。ウェブカツプログラミング学習記こんにちは。ウェブカツ!女性割引にてプログラミング学習中のみや***です。現在自習としてコーディングを復習するかたわら、ウェブカツではlaravel部を進めています。100日経過!の進捗や思うこと。オンラインプログラミングスクール「ウェブカツ!」の女性割引にて現在プログラミング学習中のみや@miyagoro22です。下からにょきっと出てくる「トップへ戻る」ボタン縦長のページでよくある「トップへ戻る」ボタン。便利で使用場面の多いFlexBox。使い方は簡単・・・なのに、あるとき、どうしてもcssの指定が効かなくなってしまいました。やりたいことは、こんな感じ。liタグで画像をリスト化し、flexで横並び。li...プログラミング勉強クリックした要素から近いdata属性の値を取得(children使用)要素をクリックしたら、クリックした直近要素のdata属性の値を取り出したい。走りつつもちょっと伸び悩み。ウェブカツ!女性割引にてプログラミング学習中のみや***です。プログラミング学習を開始してから、137日経過しました。ウェブカツ!プログラミング学習記こんにちは。ウェブカツ!女性割引にてプログラミング学習中のみや***です。最近ウェブカツでの学習は少し横に置いて、ワードプレスのカスタマイズを行っていました。目的は、私のことや、プログラミングを学ぶ中で製作したものを人にお見...プログラミング勉強ウェブカツでプログラミング学習!選んだ理由と、2週間たった感想を。ウェブカツでプログラミングを勉強して2週間経ちました!ざっくりした感想や、気になることなどをシェアします。初学者でもできたbash_profileへの追記・編集方法。