position:sticky の上にはみ出す部分を非表示にしたい

次の HTML があります

html
1<!doctype html>
2
3<style>
4body{
5	margin: 0;
6	height: 100vh;
7	display: flex;
8	flex-flow: column;
9}
10header {
11	height: 30px;
12	background-color: #55a0ff;
13	flex: none;
14}
15.body {
16	height: 0;
17	flex: 1 1 auto;
18	display: flex;
19}
20aside {
21	width: 200px;
22	flex: none;
23	background-color: #66E8A0;
24}
25main {
26	flex: 1 1 auto;
27	overflow: auto;
28	padding: 20px;
29}
30main h1 {
31	color: white;
32	background-color: #f65f77;
33	margin: 0;
34	position: sticky;
35	top: 0;
36}
37</style>
38
39<header>header</header>
40<section class="body">
41	<aside>sidebar</aside>
42	<main>
43		<section>
44			<h1>sticky</h1>
45			<div>text</div><div>text</div><div>text</div><div>text</div>
46			<div>text</div><div>text</div><div>text</div><div>text</div>
47			<div>text</div><div>text</div><div>text</div><div>text</div>
48			<div>text</div><div>text</div><div>text</div><div>text</div>
49			<div>text</div><div>text</div><div>text</div><div>text</div>
50			<div>text</div><div>text</div><div>text</div><div>text</div>
51			<div>text</div><div>text</div><div>text</div><div>text</div>
52			<div>text</div><div>text</div><div>text</div><div>text</div>
53			<div>text</div><div>text</div><div>text</div><div>text</div>
54			<div>text</div><div>text</div><div>text</div><div>text</div>
55			<div>text</div><div>text</div><div>text</div><div>text</div>
56			<div>text</div><div>text</div><div>text</div><div>text</div>
57			<div>text</div><div>text</div><div>text</div><div>text</div>
58			<div>text</div><div>text</div><div>text</div><div>text</div>
59			<div>text</div><div>text</div><div>text</div><div>text</div>
60			<div>text</div><div>text</div><div>text</div><div>text</div>
61			<div>text</div><div>text</div><div>text</div><div>text</div>
62			<div>text</div><div>text</div><div>text</div><div>text</div>
63			<div>text</div><div>text</div><div>text</div><div>text</div>
64			<div>text</div><div>text</div><div>text</div><div>text</div>
65			<div>text</div><div>text</div><div>text</div><div>text</div>
66			<div>...</div>
67			<h1>sticky2</h1>
68			<div>text</div><div>text</div><div>text</div><div>text</div>
69			<div>text</div><div>text</div><div>text</div><div>text</div>
70			<div>text</div><div>text</div><div>text</div><div>text</div>
71			<div>text</div><div>text</div><div>text</div><div>text</div>
72			<div>text</div><div>text</div><div>text</div><div>text</div>
73			<div>text</div><div>text</div><div>text</div><div>text</div>
74			<div>text</div><div>text</div><div>text</div><div>text</div>
75			<div>text</div><div>text</div><div>text</div><div>text</div>
76			<div>text</div><div>text</div><div>text</div><div>text</div>
77			<div>text</div><div>text</div><div>text</div><div>text</div>
78			<div>text</div><div>text</div><div>text</div><div>text</div>
79			<div>text</div><div>text</div><div>text</div><div>text</div>
80			<div>text</div><div>text</div><div>text</div><div>text</div>
81			<div>text</div><div>text</div><div>text</div><div>text</div>
82			<div>text</div><div>text</div><div>text</div><div>text</div>
83			<div>text</div><div>text</div><div>text</div><div>text</div>
84			<div>text</div><div>text</div><div>text</div><div>text</div>
85			<div>text</div><div>text</div><div>text</div><div>text</div>
86			<div>text</div><div>text</div><div>text</div><div>text</div>
87			<div>text</div><div>text</div><div>text</div><div>text</div>
88			<div>text</div><div>text</div><div>text</div><div>text</div>
89			...
90		</section>
91	</main>
92</section>

main 要素の内側がスクロールし、 h1 が sticky となっているので上部で h1 要素が固定されますが、スクロールすると h1 の上の余白部分に text が表示されています。
main の padding 部分には何も表示しないようにしたいです。
はみ出してほしくないので単純に main の内側で overflow: hidden; を設定すればよいというものでもありません。（sticky やスクロールバーの位置がおかしくなる）

スクロールバーの位置は main 要素全体（余白の内側に持ってこない）として、余白部分には表示しないことは実現は可能でしょうか？
以下の方法は実現できるものの避けたいと考えています。

余白部分に背景色と同じ色のブロック要素を本文より上のレイヤに座標指定で配置し見えなくする
JavaScript を使う
- スクロールバー自体を実装したり、表示用のスクロールバーを置いておいて実際にスクロールしたい部分と同期させる

行動規範の内容に同意します

回答1件

ベストアンサー

margin ではスクロールバーの位置が微妙に変わるのが嫌ということでしょうか？

CSS
1main {
2    clip-path: polygon(0% 20px, 0% 100%, 100% 100%, 100% 0%, calc(100% - 20px) 0%, calc(100% - 20px) 20px);
3}

https://developer.mozilla.org/ja/docs/Web/CSS/clip-path

投稿2019/06/03 03:21

x_x

総合スコア13749

lazex

2019/06/03 05:41

なるほど、clip-path。ありがとうございました。スクロールバーは main の縁に沿って上から下までとする必要があってので使えませんでした。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

position:sticky の上にはみ出す部分を非表示にしたい

関連した質問