There are two sections that need to be fixed at the top of the page, and when scrolling so that they remain at the top.

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

Fix like this

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

But on indenting screens I work crookedly, if you do without a margin it does not work. If you make only one block, for example, grey without a margin , does it work? How to fix the two sections? A working example is here .

  • Why not just wrap both sections in one block? - Vadim Ovchinnikov
  • I tried, did not work, made a div block, wrapped both sections in it. Assign properties in general, everything is gone. - duddeniska
  • I would, in general, make a block of a fixed type like this: codepen.io/Geyan/pen/YpmwmW - user33274

2 answers 2

Put both section in one div (for example, with id header ) and set its styles

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

     * { 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>