メニューが止まらない!?エンジニアがハマったstickyトラップ

公開日: : 最終更新日:2020/12/19 事務局の日常

みなさんこんにちは。ノウキナビ エンジニアの網掛です。
現在のノウキナビチームは(というか唐沢農機サービス全社的にそうなんですが)お金がかからないならなんでもやってみることが奨励されています。
「始めなければいつまでたってもできないよ。」
「できない理由考えるより、できる方法考えた方が楽しくね?。」
そんな会社です。

そんな会社なので、バックエンドのエンジニアも例外ではありません。デザイナーが足りなければCSSを書く必要に迫られます。

今回はスタイルシートを書いていて半日私を悩ませたstickyについて書きたいと思います。

 

stickyとは

WEBデザイナーやフロントエンドエンジニアにはおなじみの{position: sticky;}。
画面にスクロールに合わせて一緒に動くけれど、ある部分まできたらピタッと止まる便利なスタイルシートです。
当サイトでもメニューや画像の表示に使われています。

 


<style>
.in{ border: 1px solid white;}
.content1{height:100px;background-color: bisque;}
.content2{height:300px;background-color: bisque;}
.menu1{background-color:blueviolet;position: -webkit-sticky; position:sticky; top:0 }
.menu2{background-color:brown;position: -webkit-sticky; position:sticky; top:0 }
</style>
<div class="out">
<div class="in">
<div class="content1">content1</div>
<div class="menu1">Menu1</div>
<div class="content2">content2</div>
</div>
<div class="in">
<div class="content1">content3</div>
<div class="menu2">Menu2</div>
<div class="content2">content4</div>
</div>
</div>

このStickyを指定したmenuが画面最上部で止まらずに流れていってしまうんです・・・。
これには困りました。

 

stickyが効かない原因

半日ほど悩みました。プロパティをひとつづつ消したり戻したりして調べたところ、stickyを指定している要素の親要素にoverflowが指定されているときには止まらない“場合がある”ことが分かりました。
まぁ、この手の足踏みはエンジニアには日常茶飯事です。解決できて良かったぁ。
もし、”position: sticky”で止めたいものが止まらないとお悩みの方、親要素を遡ってoverflowプロパティを消してみてください。

↓↓↓ menuが止まらないパターン ↓↓↓

<style>
.out{overflow:scroll}
.in{ border: 1px solid white;}
.content1{height:100px;background-color: bisque;}
.content2{height:300px;background-color: bisque;}
.menu1{background-color:blueviolet;position: -webkit-sticky; position:sticky; top:0 }
.menu2{background-color:brown;position: -webkit-sticky; position:sticky; top:0 }
</style>
<div class="out">
<div class="in">
<div class="content1">content1</div>
<div class="menu1">Menu1</div>
<div class="content2">content2</div>
</div>
<div class="in">
<div class="content1">content3</div>
<div class="menu2">Menu2</div>
<div class="content2">content4</div>
</div>
</div>

 

ノウキナビではstickyが扱えるWEBデザイナー、フロントエンドエンジニアを募集中です!
一緒に悩んでいただける仲間を求めています。是非、リクルートサイトよりお問合せください。
ご連絡おまちしてます!
 
 

投稿者:網掛

家庭菜園を広めたい中年ITエンジニア。 自然農法を実践しているが、実になるものは鹿や狸にことごとく食われる始末。今年は里芋とジャガイモで勝負。

関連記事

【農家さん必見】おすすめの乗用草刈機を選んだけど、デメリットってないの?

こんにちは、ノウキナビ事務局(唐沢農機サービス)代表の唐澤です。 今回のノウキナビWeb通信はこちら

記事を読む

【農家必見】ノウキナビオフィシャル部品取り寄せサービスが有料化してしまった件

こんにちは、ノウキナビ事務局(唐沢農機サービス)代表の唐澤です。 本日のノウキナビWeb通信はこちら

記事を読む

【農家さん必見】バインダーの結束不良をなくす方法

こんにちは、ノウキナビ事務局(唐沢農機サービス)代表の唐澤です。 本日のノウキナビWeb通信はこちら

記事を読む

【農家必見】啓文社農機純正パーツがネットで注文できる!?

こんにちは、ノウキナビ事務局(唐沢農機サービス)の神林です。 本日のノウキナビWeb通信はこちらの

記事を読む

【農家必見】 アグリテクノ矢崎農機純正パーツがネットで注文できる!?

こんにちは、ノウキナビ事務局(唐沢農機サービス)の神林です。 本日のノウキナビWeb通信はこちらの

記事を読む

【農家必見】 石井製作所農機純正パーツがネットで注文できる!?

こんにちは、ノウキナビ事務局(唐沢農機サービス)の神林です。 本日のノウキナビWeb通信はこちらの

記事を読む

【農家必見】丸山製作所純正パーツがネットで注文できる!?

こんにちは、ノウキナビ事務局(唐沢農機サービス)代表の唐澤です。 本日のノウキナビWeb通信はこちら

記事を読む

【農家必見】ラビット農業機械の農機純正パーツがネットで注文できる!?

こんにちは、ノウキナビ事務局(唐沢農機サービス)の神林です。 本日のノウキナビWeb通信はこちらの

記事を読む

【ノウキナビ営業日誌 vol.15】 販売店様の紹介ページはホームページがわり?

毎度お世話になっております。 ノウキナビ営業でございます。 日に日に寒さも増して、いつの間にか冬に

記事を読む

ノウキナビ営業日誌vol.42 ついに三代目ノウキナビ号登場!

毎度お世話になっております。 流行の新型ウイルスも治まることもなく、今だに感染が続いております

記事を読む