Is it possible to make this adaptive?

Question

JavaScript

You need to convert the template to joomla.
The designer provided a layout drawn for a certain resolution...
The client wants an effect, I have not encountered such an effect, I will try to describe it....
div10 Top block, background image, logo, menu.... Width 100%
div20 Block with a slider. Width 100%
div30 Content, width 80%
div40 footer, width 80%
When scrolling the slider, the div10 block must remain on the screen (fixed?), in addition, there must be another div25 block on the main page, it must be stuck to the div10 block when the slider disappears.
How to do this?

Answer 1

div10 fixed,
div10 parent padding-top: div10 height
for div25

$(window).scroll(function(){
  var $body = $("body");
  if ( $(this).scrollTop() > 'высота до div25 минус высота div10'){
      $body.addClass("fixed");
  } else if($(this).scrollTop() <= 'высота до div25 минус высота div10' && $body.hasClass("fixed")) {
      $body.removeClass("fixed");
  }
});

when scrolling by a certain amount, the fixed class is added to the body
and a new style dances from it to div25
body.fixed .div25 { position: fixed;}