スクロールしてもついてくるメニュー[JQuery]

画面上部にメニューを表示しつづける

See the Pen
by ぼぶ@朝活input中 (@bobu_6326)
on CodePen.

解説

CSS

body

  • body{ height } =スクロールで動作確認をするために 2000px の高さを用意

.menu

  • border = menu の外枠線の記述
  • width = メニューの高さ
  • list-style = <li> の文字始めについている・を表示しないようにする
  • text-align = テキストを中央寄せにする
  • padding = 要素の周りの余白をなくす
  • position: absolute; = メニューを top や left で操作するために付与
  • top: 0; = 画面上部に表示するため。下なら bottom: 0; 右なら right: 0;

li:first-of-type

<li> の一番最初の要素だけにあてるCSS

li:not(:first-of-type)

<li> の最初以外の要素にあてるCSS

JQuery

  • $(window).on(‘scroll’,function(){ } = ウィンドウをスクロールした時に発動するイベント
  • let page_top = $(this).scrollTop(); = ウィンドウをスクロールした時の上部の位置を数値として 変数page_top に取得
  • $(‘.menu’).css({ }); = .menu に CSS を付与する。付与するCSS は「top に page_top の値」とアニメーションにする為の「transition: 0.5s」

$(‘.menu’).animate({top: page_top},50) で同様の動作をさせる事が出来るが、.css のほうが動きがスムーズに感じたので .css を採用。

国内WordPressテーマ シェア率 No.1

Web制作案件にも使いやすい WordPress テーマ

SWELL

シンプルで多機能、そしてカスタマイズしやすい

ダッシュボードやカスタマイズ画面に沢山の設定が追加されていて、ノーコードでも相当なカスタマイズが可能。
追加CSS、追加JavaScript をページ毎に入力欄があるので、細部までこだわったサイト制作が可能。

買い切り型で、複数サイトに使用可能、Web制作案件にも

一度購入すれば、いくつのサイトに使用してもOK。フリーランスのWeb制作案件にも使えます。
メンバー登録すればテーマ更新も無償。

  • 一度買えば、月額料金はなし
  • 複数サイトで使用可能
  • ノーコードでも調整できる設定が、ダッシュボードやカスタマイズ画面に大量追加
  • ブロックエディタの豊富な追加ブロックで投稿がリッチに
  • 細部の調整が、「追加CSS と 追加JavaScript」 で簡単に出来る
  • 他の人気テーマ からの乗り換え対応プラグイン配布( cocoon, ADDINGER, JIN, SANGO, STORK, THE THOR)
jquery.logo

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

bobuのアバター bobu Webクリエイター

ホームページ制作、リメイク、バナー、画像制作を行っています。
毎朝5:00-7:00 まで朝活で ITの知識を インプット+ Twitter へアウトプット。
お仕事のご依頼は「お問い合わせページ」からご連絡ください。