web-dev-qa-db-ja.com

bootstrapを使用せずにscrollspyを使用する方法

ブートストラップを使用せずにscrollspyを使用する方法を知っている人はいますか？私はこのリポジトリを使用して私のプロジェクトの1つでこれを動作させるようにしています：

https://github.com/sxalexander/jquery-scrollspy

bootstrap oneが行うことを実行しません。liタグはアクティブとしてマークされていません:(任意の助けいただければ幸いです。

私はこれをやってみました：

    $('#intel_nav').scrollspy({
        //n: $('#nav').offset().top,
        onEnter: function (element, position) {
            console.log(element);

            $("#intel_nav").addClass('moo');
        },
        onLeave: function (element, position) {
            $("#intel_nav").removeClass('out');
        }
    });

要素が実際のメニューのように見えるので、現在ホバーしている要素のIDを実際に取得する方法がわかりません。

jqueryscrollspy
10
r3plica

これを修正するために、私は自分のプラグインを書きました。ここで見つけることができます：

https://github.com/r3plica/Scrollspy

7
r3plica

まだ誰もがこれに興味を持っているなら、私はbootstrap scrollspyが十分に速く機能するように得ることができなかったので、私は独自の（技術的に非効率ですが単純な）解決策を書きました。

ここにデモがあります：

$(window).bind('scroll', function() {
    var currentTop = $(window).scrollTop();
    var elems = $('.scrollspy');
    elems.each(function(index){
      var elemTop       = $(this).offset().top;
      var elemBottom    = elemTop + $(this).height();
      if(currentTop >= elemTop && currentTop <= elemBottom){
        var id          = $(this).attr('id');
        var navElem = $('a[href="#' + id+ '"]');
    navElem.parent().addClass('active').siblings().removeClass( 'active' );
      }
    })
}); 
.active{
  color: red;
  background-color: red;
}

#nav{
  position:fixed;
  top:0;
  right:50%;
}

section{
  min-height: 500px;
}
<html>
        <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   </head>
   <body>
      <nav id="nav" class="navbar navbar-template">
        <div class="row col-xs-12 text-center">
          <ul>
            <li class="active">
              <a href="#Home">Home</a>
            </li>
            <li>
              <a href="#AboutUs">AboutUs</a>
            </li>
            <li>
              <a href="#Images">Images</a>
            </li>
            <li>
              <a href="#Contact">Contact</a>
            </li>
          </ul>
        </div>
      </nav>

      <section class="scrollspy" id="Home">
      Home
      </section>

      <section class="scrollspy" id="AboutUs">
      AboutUs
      </section>

      <section class="scrollspy" id="Images">
      Images
      </section>

      <section class="scrollspy" id="Contact">
      Contact
      </section>
</body>
8
bnunamak

ブートストラップのカスタマイズページを使用して、scrollspy JSのみをダウンロードできます。 「nav」CSSも必要です。このリンクは正確にあなたが必要とするものでなければなりません： http://getbootstrap.com/customize/?id=8f4a63b0157214af61c9ce380630a64d

JSファイルとCSSファイルをダウンロードして、サイトに追加します。 Scrollspyはブートストラップのドキュメントごとに機能するはずです（ http://getbootstrap.com/javascript/#scrollspy ）

1
Andrew

github.com/sxalexander/jquery-scrollspy は、Bootstrapプラグインのように_<nav>_メニューを自動的にアクティブにするようには見えません。

ただし、表示される要素のIDは提供されます。コンソールに要素IDを出力する this JSFiddle を参照してください。

そのIDを持つ要素に対応するメニュー項目を強調表示する方法を決定する必要があります。たとえば、メニューリンクに_data-target="section1"_属性を設定し、ID _section1_の要素が表示されたら、$("#intel_nav a[data-target='" + "section1" + "']")でメニューを探します。

1
Gyrocode.com

すべての推奨事項を確認した後、 Gyrocode.com のアイデアに従い、 Mr。Sam Alexander（sxalexander）jquery-scrollspy、David WalshのMooTools scrollspy;に基づいた素晴らしい作品 Gyrocode.com で提案されている JSFiddle で提案されているように、メニュー（ナビゲーションの有無にかかわらず）やクリエイティブな義務でこれをハードに使用することはないと思います。

すべてが同じタグ（<section>）またはこの場合は同じクラス名（。scrollspy）、およびセクションは[〜＃〜] id [〜＃〜]（プラグインの一部として）

私はこれの私の実装を共有します：

var menuSelected = null; // var to detect current selected element to pass the class that does visible the spy.

jQuery(document).ready(function( $ ){
  // Detect Initial scroll position
  var currentTop = $(window).scrollTop();

  $('.scrollspy').each(function (i) {
    var position = $(this).position();
    // Only to activate the top element ( current # ) 
    // if current is less than height.
    if ( i === 0 && !menuSelected && currentTop < $(this).height() ) navUpdate( $('a[href="#' + $(this).attr( 'id' ) + '"]') );

    // Basic implementation
    $(this).scrollspy({
      min: position.top - 100,
      max: position.top + $(this).height(),
      onEnter: function (element, position) {
        // update the button that have the element ID
        navUpdate( $('a[href="#' + element.id+ '"]') );
      }
    });
  });

  // method to update the navigation bar
  function navUpdate( where ){        
    if ( menuSelected ) menuSelected.removeClass( 'active' );
    menuSelected = where.parent();
    menuSelected.addClass( 'active' );
  }
});
0
jam65st