There is such a code.

<section class="header"> Шапка </section> <!--//шапка--> <!--***МЕНЮ***--> <section class="main-menu"> Меню </section>

When scrolling down, how to make it so that would be fixed at the top of the page?

  • As an example, position: fixed on the menu block. It is also useful to give it a z-index more, so that new elements do not fit on the cap. If the menu doesn't stick to the ceiling, use top: 0px. - alexoander

2 answers 2

The easiest option, something like this:

 $(window).on('scroll', function(e) { var $header = $('.header'), $menu = $('.main-menu'), scroll = $(this).scrollTop(); if (scroll >= $header.height()) { $menu.addClass('fixed'); } else { $menu.removeClass('fixed'); } }); 
 body { height: 1000px; } .header { background: #eee; height: 80px; } .main-menu { width: 100%; height: 30px; background: #f00; } .main-menu.fixed { position: fixed; top: 0; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="header"> Шапка </section> <!--//шапка--> <!--***МЕНЮ***--> <section class="main-menu"> Меню </section>

    position: fixed on the menu block / header. It is also useful to give it a z-index more, so that new elements do not fit on the cap. If the menu doesn't stick to the ceiling, use top: 0px. those.

     .header { position:fixed; top:0px; z-index:9999; }