Hello.
There is a fixed block at the bottom of the screen.

position:fixed; bottom:0; width:100%; z-index:9999;

How to make it stick to the top of the footer when the page is scrolled to the footer?

enter image description here

    2 answers 2

    position: sticky + filament group Fixed-sticky polyfill .

     * { margin: 0; padding: 0; box-sizing: border-box; } .container { display: flex; } article { width: 70%; height: 800px; background: #000; } aside { width: 25%; background: yellow; position: relative; } .aside__sticky { position: sticky; height: 200px; top: 0; border: 3px solid red; background: #ccc; } footer { height: 300px; background: #999; } 
     <div class="container"> <article></article> <aside> <div class="aside__sticky"></div> </aside> </div> <footer></footer>

      Something like that, or did you mean something else?

       $(window).on('scroll.a', function() { var a = $('#a').position().top-$(window).height() if($(this).scrollTop()>=a){ $('.fixed').css({'position':'relative','bottom':'85px'}) $(window).off('scroll.a'); } }) 
       .fixed{position:fixed; bottom:0; width:100%; z-index:9999; background-color: #ddd;} 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div><div id="a">m</div></div><div>a</div><div>a</div><div>a</div><div class="fixed">a</div>

      • Apparently, not that)) here is santech.icms.space the block floats here, I need to, when the page is screwed to the footer, it remains above the footer - Alexandros
      • I went to your site, and ordered the class "main-bottom" "position: relative;" and he stuck. That is, even the Bottom did not need him to ask in my script. - Oleksandr