How to make sticky to grandparent element? - css

Question

I know that position:sticky makes the element sticky to its direct parent. But is it somehow still possible to make it sticky to its grandparent?
Here i have tried to create a jsfiddle:
https://jsfiddle.net/n3ozx2rL/6/
I want both my search-bar and the firstsection stick to the whole page (.content). And at the end after some scrolling i would like to have sth. like this:
At the moment, the firstsection keeps its stickiness since it is the direct child of content. But not the seasrch-bar, which stays sticky just within its direct parent "header".
Here is the code again since SO asks for it:
.content {
height: 1000px;
background-color: yellow;
padding: 20px;
}
.header {
height: 100px;
background-color: orange;
margin-bottom: 10px;
}
.search-bar {
padding: 5px;
position: sticky;
top: 0;
}
.firstsection {
height: 50px;
background-color: green;
margin-bottom: 10px;
position: sticky;
top: 0;
}
.secondsection {
height: 300px;
background-color: blue;
}
<div class="content">
<header class="header">
<div class="search-bar">
<input>
<input>
</div>
</header>
<section class="firstsection">
<textarea></textarea>
</section>
<section class="secondsection">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
</section>
</div>

Answer 1

Try this. Didn't made sticky to grandparent, but got the expected design in that screenshot.
.content {
height: 1000px;
background-color: yellow;
padding: 20px;
}
.header {
height: 100px;
background-color: orange;
margin-bottom: 10px;
position:sticky;
top:-70px;
}
.search-bar {
padding: 5px;
position: sticky;
top: 0px;
}
.firstsection {
height: 50px;
background-color: green;
margin-bottom: 10px;
position: sticky;
top: 30px;
}
.secondsection {
height: 300px;
background-color: blue;
}
<div class="content">
<header class="header">
<div class="search-bar">
<input>
<input>
</div>
</header>
<section class="firstsection">
<textarea></textarea>
</section>
<section class="secondsection">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
</section>
</div>

Answer 2

Here is another hack using negative margin and big height:
.content {
height: 1000px;
background-color: yellow;
padding: 20px;
}
.header {
height: 100%; /* as big as content */
background: linear-gradient(orange,orange) top/100% 100px no-repeat; /* color only 100px of height */
margin-bottom: 10px;
margin-bottom:-900px; /* negative margin here */
}
.search-bar {
padding: 5px;
position: sticky;
top: 0;
background:orange;
}
.firstsection {
height: 50px;
background-color: green;
margin-bottom: 10px;
position: sticky;
top: 30px; /* adjust this */
}
.secondsection {
height: 300px;
background-color: blue;
}
<div class="content">
<header class="header">
<div class="search-bar">
<input>
<input>
</div>
</header>
<section class="firstsection">
<textarea></textarea>
</section>
<section class="secondsection">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
</section>
</div>