メニューが止まらない!?エンジニアがハマった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エンジニア。 自然農法を実践しているが、実になるものは鹿や狸にことごとく食われる始末。今年は里芋とジャガイモで勝負。

関連記事

【農機具販売店必見】第2回ノウキナビ交流会、多くの申込みをいただいています

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

記事を読む

【農機具販売店必見】第二回交流会のご報告

こんにちは、ノウキナビ事務局(唐沢農機サービス)代表の唐澤です。 第二回ノウキナビ交流会のご報告

記事を読む

ノウキナビ営業日誌 vol.9

いつもお世話になっております。 寒さが終わり一瞬の春を感じた矢先、もう夏なんじゃないかと勘違いして

記事を読む

ノウキナビ営業日誌 vol.2 〜稲刈りの季節〜

毎度お世話になっております。  最近、娘が自動車の仮免許を取得しました、ノウキナビ営業担当でございま

記事を読む

OLさんへの道

皆さん初めまして! 5月1日付で入社いたしました都竹です。 ノウキナビ事務局のコミュニケーション

記事を読む

【農機具販売店必見】ノウキナビ交流会でネットで成功する極意を伝授!!

2018年2月21日開催のノウキナビ交流会は、盛況にて終えることができました。 ご参加いただきました

記事を読む

【農機具販売店必見】第三回ノウキナビ交流会のご報告

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

記事を読む

【農家必見】農業&農家のマーケティング手法

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

記事を読む

【農機具販売店必見】これからは農機具屋さんだってYouTubeを使わなきゃ!

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

記事を読む

ノウキナビ営業日誌 vol.4

毎度、お世話になっております。 小学4年生の父、ノウキナビ営業担当でございます。 私ごとではあり

記事を読む