How to add class after scrolling past anchor?

Question

I've built a page of accordion tabs. Once the tab is opened the page auto scrolls to put the accordion panel header at the top of the page. What I want to happen is when the user begins to scroll down a class is added to the panel header which shrinks it and makes it fixed to the top. I've placed an anchor div just inside the body of the panel, however my script isn't activating.

JS:

function sticky_relocate() {
      var window_top = $(window).scrollTop();
      var div_top = $('.shrink-anchor').offset().top;
      if (window_top > div_top)
        $('.panel-heading a').addClass('shrink')
      else
        $('.panel-heading a').removeClass('shrink');
      }
     $(function() {
      $(window).scroll(sticky_relocate);
      sticky_relocate();
      });

HTML:

<div class="panel panel-main {{ id }}-panel">
    <div class="panel-heading">
        <h2 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#{{ id }}">{% block icon %}<span class="icon icon-cotm"></span>{% endblock %} {% block title %}{% endblock %}</a>
        </h2>
    </div>
    <div id="{{ id }}" class="panel-collapse collapse">
        <div class="panel-body">
            <div class="shrink-anchor"></div>
            {% block content %}
            {% endblock %}
        </div>
    </div>
</div>

If I move the anchor div just inside the closing tag of the Header panel it sort of functions. The class is added, however very inconsistently. The top panels activate late. The middle panels activate on time. The lower panels activate too early.

Took me awhile but put together a JSFIDDLE to show you the issue. This doesn't have the auto scroll, but you can see the activations are off. It appears it is reading the anchor of collapsed panel 1.

Answer 1

I figured it out. I moved the anchor inside the panel body, and then had to find a unique identifier to apply the class only when the EXPANDED panel's anchor scrolled, not all anchors (hidden).

Here is a Fiddle that shows it JSFIDDLE

function sticky_relocate() {
      var window_top = $(window).scrollTop();
      var div_top = $('div[aria-expanded="true"] .panel-body .shrink-anchor').offset().top;
      if (window_top > div_top)
        $('.panel-heading a').addClass('shrink')
      else
        $('.panel-heading a').removeClass('shrink');
      }
     $(function() {
      $(window).scroll(sticky_relocate);
      sticky_relocate();
      });

Answer 2

Theres another option too. If you want something robust there's a library called WayPoint that will give you the same effect and other options too.

var waypoint = new Waypoint({
  element: document.getElementById('element-waypoint'),
  handler: function(direction) {
    notify(this.element.id + ' triggers at ' + this.triggerPoint)
  },
  offset: '75%'
})

The handler function will trigger when the specified element is 75% from the top of the window. You could use it to add/remove a class that adjusts the size of an element.

Heres the link http://imakewebthings.com/waypoints/guides/getting-started/