При прокрутке выделите заголовок

Question

Я установил сеансы в строки.

<div class="container" id="session1">
  <div class="row session">
    <div class="fourcol">
        <h2>Session 3:</h2>
    </div>

     <div class="fourcol last">
         <p> Information about session </p>
    </div>

  </div>
</div>

У меня много таких сессий, и мне нужен способ подчеркнуть, что вы читаете сессию 1. Я хотел бы добавить класс .selected к <h2 class="selected">Session 3:</h2>, когда вы будете прокручивать его.

Я надеюсь, что это также добавит класс .selected, если есть какие-либо входящие якорные ссылки. to / session # session1, потому что ему придется «прокрутить» до этой позиции

Любая помощь будет великолепна. Спасибо.

Answer 1

Я бы рекомендовал взглянуть на jQuery Waypoints , он получил именно то, что вы ищете, и его легко использовать.

Вот пример Imade, где я добавляю класс .selected, когда элемент прокручивается в область просмотра с помощью jQuery Waypoints.

---

Конечно, вы можете сделать это и сами, но вы будете делать то же самоеПутевая точка уже выполняет.
Сначала используйте .scroll событие в любом документе или желаемом элементе для захвата определенного события, которое вы хотите.

$(document).scroll(function(e){
});

Затем используйте .scrollTop, чтобы проверить, где вы находитесь, и добавить «границы», в которых должны находиться ваши элементы, в зависимости от области просмотра, то есть окна.

$(document).scroll(function(e){
    var bound_top = $(this).scrollTop(),
        bound_bottom = bound_top + $(window).height();
});

Затем проверьте каждый элемент заголовка / раздела впосмотрите, находятся ли они в этих границах

$(document).scroll(function(e){
    var bound_top = $(this).scrollTop(),
        bound_bottom = bound_top + $(window).height();

    $("h2").each(function(){
        if( 
            $(this).position().top >= bound_top &&
            $(this).position().top + $(this).outerHeight() <= bound_bottom
        ){
            $(this).addClass("selected");
        }else{
            $(this).removeClass("selected");
        }
    }
});

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

Этот подход позволяет вам делать вещи точно так же, какВы хотите их.
jQuery Waypoints - это хороший и быстрый способтернатива.