画面上部にメニューを表示しつづける
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)
