Закрепить верхнюю шапку

473

31 декабря 2016, 13:57

Есть две секции, которые нужно зафиксировать на вверху страницы, и при прокрутке что бы они оставались вверху.

<section class ="grey">
  Тут какой то код
</section>
<section class="mnu_color">
  тут какой то код
</section>

Закрепляю вот так

.grey {
    position: fixed !important;
    width: 100%;
    z-index: 99999;
    margin-top: 142px;
}
.mnu_color {
    position: fixed !important;
    width: 100%;
    z-index: 99999;
    margin-top: 241px;
}

Но на на разных экранах отступы работаю криво, если делать без margin то не работает. Если делать только один блок, например, grey без margin, то работает? Как зафиксировать две секции? Рабочий пример тут.

Answer 1

Положите оба section в один div (например, с id header) и установите ему стили

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1; /* Любое положительное значение */
}

Answer 2

* { margin: 0; padding: 0 } 
 
#block1 { 
   width: 100%; 
   position: fixed; 
   background: #f4a; 
   height: 80px; 
} 
 
#block2 { 
   width: 100%; 
   position: fixed; 
   background: #a4f; 
   height: 40px; 
   top: 80px; 
} 
 
#content { padding-top: 120px }

<section id="block1">Section 1</section> 
<section id="block2">Section 2</section> 
<div id="content">Hello WorldHello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World  </div>