![](https://mnet-company.co.jp/wp-content/uploads/2023/05/image-1.png)
長時間作業しても疲れない!?4スタンス理論から見る本当に自分に合ったマウスの選び方!
![](https://i0.wp.com/mnet-company.co.jp/wp-content/uploads/2023/05/member02.webp?fit=96%2C96&ssl=1)
サイトを2カラム構成にした時、「左のコンテンツをある部分だけ追従させたい」って時ないですか?
自分はそんな時JavaScriptで要素の高さを取って、画面サイズから要素高さを引いて、条件分岐して・・・とJavaScriptをこねくり回すことで実現していました。
しかしposition: sticky;を使うとそれが簡単に実現できてしまうのです!
stickyがない時
stickyがある時
各「stickyのセクション」というタイトルが追従しているのが分かると思います。
position: sticky;はposition: fixed;と同じような挙動をしますがposition: fixed;は要素の高さが無くなるのに対して、position: sticky;は要素の高さが維持されます。
よって固定ヘッダー等を設置する際はわざわざマージン等を計算してヘッダーを置かなくてもよくなるので非常に簡単にナビゲーションの設置も可能になります。
そんなposition: sticky;の設定方法はこちら
.sticky {
position: sticky;
top: 0;
}
「top」「left」「right」「bottom」を設定することによりstickyの位置を決めれますが最低でもtopを指定しないと上手く挙動しないので最低限topは設定するようにしましょう。
positionプロパティは一癖も二癖もあるプロパティですが慣れれば表現の幅がぐんと広がるので是非使いこなせるようにしましょう!
山下 生真
役員
建築家を志し京都の大学を卒業。様々な業種を経て、IT業界に心惹かれ、一心発起し、プログラミングスクールに業務の傍ら通う。趣味のYouTubeの動画編集・撮影活動で現CEOと出会う。幼少期からの夢であった”魔法使いになってみんなの役に立つ”実現の為、IT技術を駆使し、世の中の役に立つことを目標に起業。座右の銘は”野心・向上心”。
長時間作業しても疲れない!?4スタンス理論から見る本当に自分に合ったマウスの選び方!
【Part7】記事取得のカスタマイズが捗る。WP_Queryの使い方。カスタムフィールドの指定編
【ワードプレス】問い合わせフォームから届く、ひたすら迷惑なスパムメールを防ぐ為には?
サステナブルマーケティングとは
対面マーケティングの重要性
AIとグラフィックデザイン: デザイナーは心配すべきか?
最近のマイブーム(おすすめメディア紹介)
Webサイト制作における開発手法
幼稚園でICT活用のメリットを紹介
デジタルヘルスとは?