Jquery 如何在不使用引导的情况下使用scrollspy

有人知道如何在不使用引导的情况下使用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。

似乎不像引导插件那样自动激活

菜单

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

---

您需要决定如何突出显示与具有ID的元素对应的菜单项。例如，在菜单链接上设置

data target=“section1”

属性，然后当具有ID的元素

section1

进入视图时，按

$（“#英特尔导航a[数据目标=”+“section1”+“]）定位菜单

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

---

您可以使用bootstrap的“自定义”页面仅下载scrollspy JS。您还需要“导航”css。此链接正是您需要的：

---

下载JS和CSS文件并将它们添加到您的站点。Scrollspy应该根据bootstrap的文档工作（）

如果有人对此感兴趣，我无法让bootstrap Scrollspy足够快地工作，因此我编写了自己的（技术上效率低，但简单）解决方案

下面是一个演示：

$（窗口）.bind（'scroll'，function（）{
var currentTop=$（窗口）.scrollTop（）；
var elems=$（'.scrollspy'）；
每个元素（功能（索引）{
var elemTop=$（this）.offset（）.top；
var elemBottom=elemTop+$（this）.height（）；
如果（currentTop>=elemTop&¤tTop在审查了所有建议之后，我遵循了这个想法，使用jquery scrollspy，这是一个基于David Walsh的MooTools scrollspy的优秀作品；我相信这不会在任何菜单（带或不带nav）中使用，也不会像他们所建议的那样在任何创造性任务中使用

当我的所有部分都具有相同的标签（如）或在本例中具有相同的类名（.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' );
  }
});

var menuSelected=null；//用于检测当前所选元素以传递不可见间谍的类的var。
jQuery（文档）.ready（函数（$）{
//检测初始滚动位置
var currentTop=$（窗口）.scrollTop（）；
$（'.scrollspy'）。每个（函数（i）{
var position=$（this.position（）；
//仅激活顶部元素（当前#）
//如果电流小于高度。
如果（i==0&&！menuSelected&¤tTop<$（this）.height（））navUpdate（$（'a[href=“#'+$（this）.attr（'id'）+'”））；
//基本实施
$（此）.scrollspy({
最小：位置。前-100，
max:position.top+$（此）.height（），
onEnter：功能（元素、位置）{
//更新具有元素ID的按钮
navUpdate（$（'a[href=“#”+element.id+'”）；
}
});
});
//方法更新导航栏
函数navUpdate（其中）{
if（menuSelected）menuSelected.removeClass（'active'）；
menuSelected=where.parent（）；
menuSelected.addClass（'active'）；
}
});
Bootstrap4Alpha没有Scrollspy，所以你的插件很好，但是有更新当前位置的
refresh
选项吗？这太棒了。可以将活动类更改为除
active
之外的其他类吗？很好。工作正常。它有什么效率低下的地方吗？我没有任何数字，但对于每个滚动event调用（滚动时可能每秒发生多次）您正在迭代每个元素，然后将类重新应用于每个导航链接。这应该没问题，因为元素/导航链接的数量自然受到可用性限制的限制，但这在理论上是一个低效的实现：）是的，我发现了效率低下的问题。我做了一些很大的改进。请看我在chrome中的Hey@bNumanak上的回答，当我点击任何链接时，在悬停的时候，类会不断变化，滚动时chrome的悬停效果也会变。所以样式也会不断变化。