How to control the positioning of a div with position Fixed?

Question

How can I make sure that when my right div gets to the div of the comment area it gets fixed again? When it arrives at a number X distance from the top I apply a position Fixed to it to keep track of the content: Link of matter

 <script type="text/javascript">
            $(document).ready(function () {
                $(window).scroll(function () {
                    if ($(this).scrollTop() > 630) {
                        $('.paginas-especiais-post').css({
                            position: 'fixed',
                            top: '60px'
                        });
                    } else {
                        $('.paginas-especiais-post').css({
                            position: 'relative',
                            top: '0'
                        });
                    }
                });
            });
        </script>

Answer 1

I found an alternative to your problem which was to add another restriction in if:

&& $(this).scrollTop() < $('.comentarios-pag').position().top - 630

if the scroll is larger than 641 and less than the distance from the comments div by subtracting the size (plus a few spaces e.g. navbar and paddings).

Abs.

$(document).ready(function() {
    $(window).scroll(function() {
        var especiais = $('.paginas-especiais-post');

        if( $(this).scrollTop() > 641 && $(this).scrollTop() < $('.comentarios-pag').position().top - 630 ) {
          especiais.css({
            position: 'fixed',
            top: '60px'
          });
        } else {
          especiais.css({
            position: 'relative',
            top: '0'
          });
        };
    });
});