Twitter Bootstrap Scrollspy with Arrow Follow

Question

Twitter Bootstrap具有scrollspy，可以根据您在页面上的位置（锚点）自动将活动类添加到导航项目。它工作得很好，但我想知道是否有人知道一个简单的方法来获得scrollspy在导航和滑动下根据滚动活动类在箭头图形。

一个例子是：https://www.simple.com/（主导航）

Answer 1

您可以收听ScrollSpy触发的激活事件，然后更新箭头div以匹配激活元素的定位。滑动可以通过CSS过渡完成。

代码的主要部分是：

HTML

<div class="navbar-wrapper">
  <div class="navbar">...</div>
  <div id="menu-arrow" class="top-arrow"></div>
</div>

CSS

.top-arrow {
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-top-color: #aaa;
  border-width: 10px 10px 0;
  -webkit-transition: left 0.5s ease-in-out;
     -moz-transition: left 0.5s ease-in-out;
       -o-transition: left 0.5s ease-in-out;
          transition: left 0.5s ease-in-out;
}

.navbar-wrapper {
  position: relative;
}

的JavaScript

$('body').on('activate', function (e) {
  var $item = $(e.target);
  $('#menu-arrow').css('left', $item.offset().left + $item.width() / 2 - 10 - $('.navbar-wrapper').offset().left);
});

您必须使用CSS对.top-arrow进行一些初始定位，您可以在此（不那么强大）的示例中看到它：

Plunker