Как сделать плавающий блок замирающий под header?

Question

[nastya_zholudeva]

У меня есть header который закреплен к верху страницы

position: fixed;
 z-index: 1000;

И так же есть блок в середине страницы. Нужно чтобы он, когда до него "докручивался" header тоже становился fixed. Т. е. под header этот блок, они fixed, а ниже дальше прокручивается контент.

Comments

[4X_Pro]

Второй вопрос куда-то пропал, но все же отвечу:
как выяснилось, вместо jQuery.scrollTop() лучше использовать document.scrollingElement.scrollTop.

[nastya_zholudeva]

4X_Pro, спасибо, все получилось)

Answer 1

[4X_Pro]

Навесить обработчик на событие onscroll и смотреть, насколько прокрутилась страница от начала. Т.е. будет что-то вроде такого:

jQuery('body').on('scroll',function (e) {
  if (jQuery('body').scrollTop()>500) { // вместо 500 поставить отступ среднего блока от верха страницы
    jQuery('.midblock').addClass('fixedblock');
  }
  else {
   jQuery('.midblock').removeClass('fixedblock');
  }
});

Тут предполагается, что у среднего блока постоянно прописан класс midblock, а когда он переходит в состояние fixed, то добавляется класс fixedblock, в котором прописаны position:fixed и отступ сверху.

Comments

[nastya_zholudeva]

А как сделать, чтобы (2) прилип к (1)?

[4X_Pro]

nastya_zholudeva, знать высоту (1), и в классе fixedblock прописать свойство top, равное высоте первого блока. Тогда (2) выведется точно под ним, и визуально будет казаться, что он к нему прилип.