There is a div, which is assigned .fixed when scrolling. It seems that everything is simple, but when you commit, the rest of the content moves up, taking up the vacant space, and the page "jumps". How to get rid of it? The diva has a variable width, so the wrap will not work. You can watch here , the patient - #uwpqsf_id

    2 answers 2

    The shift occurs because a block with position:fixed pulled out of the page flow and is attached to the coordinates of the window. As a solution, I would advise you at the moment when the assignment of the .fixed class occurs, add a margin-top for the content equal to the height of the header (or rather, what the class is assigned to)

    • the class is assigned to the search form, on mobile devices it is rebuilt in 2 rows, that is, you cannot set a static margin. Apparently, it is necessary not to fix it on small screens, but on large ones to do what you have advised. - malginovdesign
    • height can be calculated at the time of assignment. - Ivan Frolov

    I decided myself, as follows: After the block, which is destined to be fixed, we add <div class="spacer"></div> and stylize it like this:

     block.fixed ~ .spacer { height: 'высота блока, когда он не был фиксирован'; }

    Content jump no longer happens, with the addition of animation it looks gorgeous.