javascript - 滚动过去 anchor 后如何添加类？

Question

我已经构建了一个 Accordion 选项卡页面。打开选项卡后，页面会自动滚动，将折叠式面板标题放在页面顶部。我想要发生的是，当用户开始向下滚动时，将一个类添加到面板标题中，该类会缩小并固定在顶部。我已在面板主体内部放置了一个 anchor div，但我的脚本未激活。

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>

如果我将 anchor div 移动到标题面板的结束标记内，它就会起作用。该类已添加，但非常不一致。顶部面板激活较晚。中间面板按时激活。下部面板激活得太早。

花了我一段时间，但整理了一个 JSFIDDLE向您展示这个问题。这没有自动滚动，但您可以看到激活已关闭。它似乎正在读取折叠面板 1 的 anchor 。

Answer 1

还有另一种选择。如果你想要一些强大的东西，有一个名为 WayPoint 的库，它会给你相同的效果和其他选项。

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

当指定元素距离窗口顶部 75% 时，处理函数将触发。您可以使用它来添加/删除调整元素大小的类。

这是链接 http://imakewebthings.com/waypoints/guides/getting-started/