Не получается разобраться со скролом. Поможете найти решение?

Question

[Марк Мануилов]

Добрый день, эксперты.

Делаю страничку с историей. В левом блоке находятся даты, в правом - описание. При прокрутке страницы происходит следующие:

Левый блок фиксируется и всегда в поле зрения. Правый блок прокручивается в обычном режиме. Когда определенный раздел истории появляется в поле зрения, в фиксированном блоке увеличивается дата этого раздела. Реализовал подобную схему здесь https://jsfiddle.net/g94fsvd2/19/

НО вот проблема. При прокручиванию к концу данная схема нарушается. Цифры (в примере линии) не успевают за блоками и по итогу получается не совпадение дат.

Помогите решить проблему.

Answer 1

[TerNik]

Когда определенный раздел истории появляется в поле зрения, в фиксированном блоке увеличивается дата этого раздела.

Это ложное утверждение. У вас же в самом начале выделена первая дата, а не та, которая в самом низу страницы.
И самые нижние даты не подсвечиваются, потому что не поднимаются достаточно высоко.

Comments

[Марк Мануилов]

Не понимаю в чем ложность слов. В самом начале выделятся первая дата, когда виден первый блок.

Проблема не в нижней дате. Если на примере пролистаете до 6 блока, то увидете, что дата шестого блока появляется только тогда когда он уже выходит за рамки экрана, а на его месте стоит 7 блок. Т.е получается у 7 блока дата 6 блока.

[TerNik]

Изображение 1

Вот пример, где третий блок появился в поле зрения, но не увеличивается дата этого раздела. Вот про эту ложность я говорил.

Изображение 2

А вот шестой блок отображается вовремя, когда он попадает наверх.

[Марк Мануилов]

Николай Терехин, Я неправильно объяснил. Нужно чтобы даты увеличивались тогда, когда блок находиться по центру экрана.

[TerNik]

Вы нигде не используете высоту страницы. А вам надо же знать, где это, чтобы относительно нее (середины) смотреть положение блоков.

[Марк Мануилов]

Николай Терехин,

var to = $(this).offset().top-(hh/2);

Здесь используется не высота страницы? Если нет, то как это сделать?