Question

有没有人知道如何在不使用bootstrap的情况下使用scrollspy？我正在尝试使用此存储库在我的一个项目中使用它：

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

但它只是不做引导程序所做的事情。 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。

Answer 1

为了解决这个问题，我编写了自己的插件。哪个可以在这里找到：

https://github.com/r3plica/Scrollspy

Answer 2

如果有人仍然对此感兴趣，我无法让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>

Answer 3

github.com/sxalexander/jquery-scrollspy似乎没有像Bootstrap插件那样自动激活<nav>菜单。

但它确实提供了进入视图的元素的ID。请参阅在控制台中打印元素ID的this JSFiddle。

您需要决定如何突出显示与其ID相对应的元素的菜单项。例如，在菜单链接上设置data-target="section1"属性，然后当ID为section1的元素进入视图时，按$("#intel_nav a[data-target='" + "section1" + "']")

找到菜单

Answer 4

您可以使用bootstrap的自定义页面仅下载scrollspy JS。你还需要“nav”css。此链接应该是您所需要的：http://getbootstrap.com/customize/?id=8f4a63b0157214af61c9ce380630a64d

下载JS和CSS文件并将其添加到您的站点。 Scrollspy应该适用于每个bootstrap的文档（http://getbootstrap.com/javascript/#scrollspy）

Answer 5

查看所有建议后，我遵循Gyrocode.com的想法，并使用Mr. Sam Alexander (sxalexander) jquery-scrollspy ，这是基于 David Walsh的MooTools scrollspy的精美作品;我认为，Gyrocode.com在其JSFiddle中所提议的菜单（带有或不带有导航）或任何创造性的职责都不应该硬用它。

当我的所有部分都具有相同的标签（如

）或在这种情况下具有相同的类名（ .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' );
  }
});

如何在不使用bootstrap的情况下使用scrollspy

5 个答案: