Question

Please see this fiddle

I want the scrolling div stop following when left div ends at height=400px.

Is there any solution using CSS. Or I need to add other html elements?

If have to use JavaScript, how to do it?

Answer 1

You mean something like this?
I used the javascript jQuery library. If you don’t know how to use jQuery leave a reply.
(For a better effect scroll by clicking the scroll and moving your mouse)

const $scroll = $('#scrol');

$(window).on("scroll", function(){
  const st = $(this).scrollTop();
  if( st >= 240){
    $scroll.css({position: "absolute", top: 330});  
  }else{
    $scroll.css({position: "fixed", top: 100});  
  }       
});