This question has already been answered:

Hello I will describe the problem.

There is a block A (with some text). below is block B (site menu). lower down comes block B (sliders).

How to make it so that when scrolling when block A ends, the menu is attached to the top and no longer flies until you unscrew it. Example as I want to eat on the site: http://boleu.net

Reported as a duplicate by members of lexxl , aleksandr barakin , Denis , Community Spirit ♦ Jul 27 '16 at 14:24 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

    1 answer 1

    You var scrolled = window.pageYOffset || document.documentElement.scrollTop; scroll state with var scrolled = window.pageYOffset || document.documentElement.scrollTop; var scrolled = window.pageYOffset || document.documentElement.scrollTop; and depending on whether block A is visible, specify position: fixed; B for block B position: fixed; or position: inherit;

     window.onscroll = function() { var scrolled = window.pageYOffset || document.documentElement.scrollTop; document.getElementById('B').style.position = scrolled > 150 ? 'fixed' : 'inherit'; } 
     * { margin: 0; padding: 0; } .A { width: 100%; height: 150px; background: #EEE; } .B { top: 0; left: 0; width: 100%; height: 50px; background: #66A; } 
     <div class='A'></div> <div id='B' class='B'></div> <p>Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.</p> <p>Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.</p> <p>Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.</p> <p>Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.</p> <p>Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.</p> <p>Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.</p> <p>Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.</p> <p>Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.</p>

    • Thanks, everything works, but there is one problem. When the page is just loaded, the menu for some reason is fixed at the very top, and as soon as some scrolling is done, everything becomes as it should. What could be the problem? I asked myself to find an error)). Thanks again. - user216171 2:22 pm
    • You can try to specify top: 150px; in css top: 150px; and then when you change the position to fixed do top: 0 - Brik Vadim