Как сделать липкий элемент к прародителю?

Question

Я знаю эту позицию: прилипание делает элемент привязанным к его прямому родителю. Но все-таки возможно ли сделать его привязанным к прародителю?

Здесь я попытался создать jsfiddle:

https://jsfiddle.net/n3ozx2rL/6/

Я хочу, чтобы моя панель поиска и первый раздел придерживались всей страницы (.content). И в конце после прокрутки я хотел бы получить что-нибудь. вот так:

В данный момент первый раздел сохраняет свою липкость, поскольку он является прямым потомком контента. Но не бар seasrch, который остается липким только в пределах своего прямого родительского «заголовка».

Вот код снова, так как SO просит его:

.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

Вот еще один хак с использованием отрицательного поля и большой высоты:

.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>

Answer 2

Попробуйте это. Не прилипал к бабушке и дедушке, но получил ожидаемый дизайн на этом скриншоте.

.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>