javascript - Twitter Bootstrap Scrollspy 与 Arrow Follow

Question

Twitter Bootstrap 具有 scrollspy，它可以根据您在页面上的位置（锚点）自动将活动类添加到导航项。它工作得很好，但我想知道是否有人知道一种简单的方法来让 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);
});

您必须.top-arrow使用 CSS 进行一些初始定位，您可以在这个（不太强大的）示例中看到如何：

普朗克