Фиксировать блоки при скролле, когда они достигают верха экрана(плавающие блоки)?

Question

[Чёкатилло]

У меня есть рабочий скрипт, но он фиксирует только один блок под именем #data, а у меня их на странице много...
Как подправить скрипт, что бы работал со всеми одноименными блоками одинаково?

$(function(){
 var topPos = $('#data').offset().top;
 $(window).scroll(function() { 
  var top = $(document).scrollTop();
  if (top > topPos) $('#data').addClass('fixed'); 
  else $('#data').removeClass('fixed');
 });
});

css на всякий:

#data {
    width: 100%;
    height: 30px;
}
.fixed {
 position: fixed;
}

Спасибо!

Answer 1

[Stalker_RED]

Если они все на одной высоте, то все просто: вместо id="data" используйте ксласс class="my_class_name"

И в скрипте чуть подправить:

$(function(){
 var topPos = $('.my_class_name').first().offset().top;
 $(window).scroll(function() { 
  var top = $(document).scrollTop();
  if (top > topPos) $('.my_class_name').addClass('fixed'); 
  else $('.my_class_name').removeClass('fixed');
 });
});

Обратите внимание, при старте он запоминает высоту первого элемента с этим классом, какого нашел. Если они на разной высоте - придется сильнее переделывать, запоминать высоту для каждого.

Comments

[Чёкатилло]

чет все по прежнему Ничего не изменилось Да, все на одной высоте и даже в одном месте по горизонтали

[Чёкатилло]

блоки при прокрутке при достижении верха экрана тем самым должны группироваться поверх друг на друга

[Stalker_RED]

Дмитрий: Если они в одном месте и по вертикали и по горизонтали, то что мешает вам обернуть их в один враппер и дать ему id="data"?
Соберите может пример на jsfiddle.

[Чёкатилло]

Stalker_RED: собрать пример наверное не получится Лучше посмотреть cg91812-wordpress-4.tw1.ru
Как советуете, я уже делал При скролле увидите белый блок с датой

Тут фишка еще в том, что превью постов .pinbox и даты (имеют тоже блок .pinbox) выводятся таким образом:

<div class="boxcontainer">
			<?php $ym_ = "";
if ( have_posts() ) :
  while ( have_posts() ) : the_post();
    $ym = get_the_date('Ym', $post->ID);
    if ( $ym_ != $ym ){
      echo '<div id="data"><h3 class="pinbox">'.get_the_date('F Y', $post->ID).'</h3></div>';}
    get_template_part('pinbox', get_post_format());
    $ym_ = $ym;
  endwhile;
endif; ?>
		</div>

[Чёкатилло]

Stalker_RED: и если скроллить далее вниз, то становится понятно, что обертка #data уже не прогружается с подгруженными превью Хз что тут делать вообще Какая-то хитринка нужна Вообще обойти этот момент и может даты вообще вывести из формирования масонри и выводить отдельно как-то