Question

I have set the sessions into rows.

<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>

I have many of these sessions and need a way to highlight that you are reading session 1. I would like to add a .selected class to <h2 class="selected">Session 3:</h2> as you scroll past it.

I’m hoping this will also add the .selected class if there are any incoming anchor links. to /sessions#session1 because it would have to ‘scroll’ to that position

Any help would be great. Thanks.

Answer 1

I would recommend a look at jQuery Waypoints, it’s got exactly what you’re looking for, and it’s easy to use.

Here’s an example I made, where I add the .selected class when an element is scrolled into the viewport using jQuery Waypoints.

---

You can of course do it yourself as well, but you’d be doing the same thing Waypoint is already doing.
First use the .scroll event on either document or a desired element to capture particular event you want.

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

Then use .scrollTop to check where you are, and add “boundaries” your elements have to be within, based on the viewport, ie, the window.

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

Then check each header/section element to see if they are within those boundaries

$(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");
        }
    }
});

It would look a little something like in this example I made.

This approach lets you do things exactly the way you want them.
jQuery Waypoints is a good and fast alternative.