javascript - Twitter Bootstrap Scrollspy with 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);
});

CSSを使用して初期配置を行う必要が.top-arrowあります。これは、この（それほど堅牢ではない）例でどのように確認できますか。

プランカー