jQuery

【jQuery】スクロールすると上からニョキっと出てきてそのまま追従するメニューの実装方法

2017/11/10

スクロールするとメニュー(この場合は主にグローバルナビ)が一旦流れるのですが、そのままスクロールしていくと上からニョキっと出てきてそのまま追従するタイプのエフェクトがあります。

まずはサンプルをご覧ください。

See the Pen KyWddO by OKD (@OKD) on CodePen.

今回のポイントはこちら。

  1. スクロールすると上からグローバルナビがスライドして降りてくる
  2. そのまま画面TOPに固定されて追従する
  3. スクロールしてきた時に表示されるメニューは最初に表示されるよりも高さを狭くして表示領域を広く保つ

サンプルのcodepenでもコードは見れますが簡単な解説も踏まえて実装方法を紹介します。

HTML

header部分の構成が同じであれば後で紹介するjqueryも同じように動きます。ご参考までに。

jQuery

ポイントはスクロールする高さ(スクロールする量)によってheadrに「fixed」というクラスを付け外しする部分です。
※jQuery本体の読み込みも忘れずに

CSS

headerにfixedが付与されるとpositionがfixedになるところがポイントです。
あとはなるべくスクロールしている時に表示領域をナビで狭くしたくないので、ナビがfixedになっている場合は高さを狭くするように記述しています。
今回はline-heightで調整してますが、paddingでもmarginでも仕様によって調整してもらえれば大丈夫です。

CSSの記述時に一つだけ注意点があります。
headerをゆっくりアニメーションさせたいからといって「transitionall .3s;」などtransition系のcssと組み合わせたりすると場合によっては上からニョキっと降りてくるアニメーションが動かなくなる場合がありますのでご注意ください。

SPONSORED LINK

シェアはこちらから

関連記事