Возможно ли такое сделать адаптивным?

Question

[Павел]

Нужно переделать шаблон на joomla.
Дизайнер предоставил макет прорисованный под определённое разрешение...
Клиент хочет эффект, с таким я не сталкивался, попробую описать....

div10 Верхний блок, фоном изображение, лого, меню.... Ширина 100%
div20 Блок со слайдером. Ширина 100%
div30 Контент, ширина 80%
div40 футер, ширина 80%

При прокрутке слайдера, блок div10 должен оставаться на экране (fixed?), кроме того, на главной странице должен быть еще один блок div25, он должен быть прилеплен к блоку div10 в момент пропадания слайдера.

Как такое делать?

Answer 1

[Александр Алексеев]

div10 fixed,
родитель div10 padding-top: высота div10

для 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");
  }
});

при скролле на определенную величину к body добавляетя класс fixed
и от него пляшется новый стиль к div25
body.fixed .div25 { position: fixed;}