Question

我已经构建了一个手风琴标签页面。打开选项卡后，页面会自动滚动以将折叠面板标题放在页面顶部。我想要发生的是当用户开始向下滚动时，一个类被添加到面板标题中，缩小它并使其固定在顶部。我已经在面板的主体内部放置了一个锚点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>

如果我在Header面板的结束标签内移动锚点div，那就是它的功能。该类被添加，但非常不一致。顶部面板激活较晚。中间面板按时激活。下面板过早激活。

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

Answer 1

我明白了。我将锚点移动到面板体内，然后必须找到一个唯一的标识符才能在EXPANDED面板的锚点滚动时应用该类，而不是所有锚点（隐藏）。

这是一个显示它的小提琴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

另外一个选择。如果你想要一些强大的东西，那么一个名为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/

滚动过去后如何添加类？

2 个答案: