Question

您好我正在尝试创建像scrollspy的引导程序。

$(document).ready(function(){
   $(window).scroll(function(e){
      var scroll = $(window).scrollTop();
      var chapterpos1 = $("#chapter1").offset().top;
      var chapterpos2 = $("#chapter2").offset().top;
      if(chapterpos1 < scroll){
         $(".anchortag").removeClass("active");
         $("#box").find("[href='#chapter1']").addClass("active");
      }
      if(chapterpos2 < scroll){
         $(".anchortag").removeClass("active");
         $("#box").find("[href='#chapter2']").addClass("active");
      }

  });
});

这是我的代码。它可以工作，但如果我不知道运行时有多少ID，它将如何使其动态化。现在我实现了#chapter1和#chapter2。但是如何让它成为像这样的20章的动态。谢谢。

Answer 1

使用attribute-starts-with选择器（{{{standard input|save and continue}}}）选择所有章节，并运行一个功能，在您找到的每个章节中执行所需的功能。

[attribute^=value]

Answer 2

正确答案：

$(function(){
  $(window).scroll(function(e){
  var scroll = $(window).scrollTop();

  $('.anchortag.active').removeClass('active');

  $('[id^=chapter]').each(function(_, chapter) {
      var id = chapter.id;

      if($("#"+id).offset().top < scroll) {
         $('#box .anchortag).removeClass('active'); 
         $('#box .anchortag[href=\'#' + id + '\']').addClass('active'); 
      }
  });
 });
});

创建自定义scrollspy，如bootstrap

2 个答案: