How to change class when it scroll to end of div?

Question

Ok i have 3 divs. I have fixed menu in second div and i want that fixed menu is only fixed in that second menu and when it come out of that div it is display:none; This is my fiddle. Any suggestion?

https://jsfiddle.net/wx38rz5L/1817/

if ($(this).scrollTop()>=$('.compare-wrapper').position().top)
    $('.compare-menu-fixed').css('display','block');
else
    $('.compare-menu-fixed').css('display','block');

Answer 1

Put it inside scroll event:

$(document).on( 'scroll', function(){
    if($(this).scrollTop()>=$('.compare-wrapper').position().top)
        $('.compare-menu-fixed').css('display','block');
    else
         $('.compare-menu-fixed').css('display','none');
});  

Check Demo Here