It is necessary to impose the following: fixing and unfixing block on page scroll

The left block at scrolling up to this section is fixed on top until the third right block is equal to it, then the page continues to scroll. You also need to add a smooth scroll to each of their right blocks.

He himself achieved only a “fixation” of the block, but, alas, I do not understand how to “release” him.

var offsetSection = $('родительский блок').offset().top; $(window).on('scroll', function() { if($(window).scrollTop() > offsetSection) { $('левый блок').addClass('fixed'); } else { $('левый блок').removeClass('fixed'); } })

    1 answer 1

    All the same, just a little more complicated. The block is positioned using position:absolute; :

    I would not recommend counting heights at the beginning of the script if the height of the blocks is not fixed.

     var offsetSection = $('.right').offset().top; var heightSection = $('.right').offset().top + $('.right').height() - $('.left').height(); $(window).on('scroll', function() { if ($(window).scrollTop() > offsetSection) { if ($(window).scrollTop() < heightSection) { $('.left div').removeClass('bottom'); } else { $('.left div').addClass('bottom'); $('.left').height($('.right').height()) } $('.left div').addClass('fixed'); } else { $('.left div').removeClass('fixed'); } }) 
     body{padding:0;margin:0;} .block { width: 80%; height: 100px; background: #ccc; margin: 20px 10%; } .left, .right { width: 50%; float: left; min-height: 10px; position: relative } .b { clear: both; height: 100px; } .fixed { position: fixed; width: 40%; margin: 20px 5%; top: 0; } .bottom { position: absolute; bottom: 0; top: auto; width: 80%; margin: 20px 10%; } .right+.b { height: 1000px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="b"></div> <div class="left"> <div class="block"></div> </div> <div class="right"> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div> <div class="b"></div>

    • Everything is working. Thank! There is one nuance: in my case, the left and right blocks with a window width of less than 990px ​​become one above the other, and the script makes sure that the height of the left block is equal to the right one. I tried to do this: $(window).on("resize", function() { if (this.width <= 990) { $(".right").height("auto"); } }) Not works. - Michael Kopytin
    • @MichaelKopytin first use window.matchMedia( "(min-height: 990px)" ) ; secondly try $(".right").css("height","auto") - Crantisz