带有进度条的目录答案

【问题标题】：table of contents with progress bar带有进度条的目录
【发布时间】：2020-09-24 03:02:43
【问题描述】：

我正在尝试制作一个带有进度条的目录，该进度条会根据我文章的阅读进度而变化。我的文章包含多个标题（title1、title2、...）。我菜单中的每个标题都有一个进度条。如何让进度条根据阅读进度进化？

这是我的 HTML / CSS / JS 代码缩小： https://jsfiddle.net/Bernardooooo/c71ybgx5/2/

$self = this;

this.$content = $('.page__body');
this.$sidebar = $('.page__sidebar');
this.$title = $('.page__title', this.$content);
this.$header = $('.header');
this.offset = this.$header.outerHeight();
this.arrayTitle = [];

$self.$title.each(function(id) {
  // Calc here
});

$(window).scroll(function() {
  let scroll = $(window).scrollTop();
    // update % width progress bar 
  element.progress.css('width', percent + '%');
});

我得到了“标题”，因为这个是固定的，所以我需要知道它的高度。我已经拿起了一些东西，但我不知道如何做数学。有人可以帮助我吗？

【问题讨论】：

标签： javascript jquery twitter-bootstrap progress-bar tableofcontents

【解决方案1】：

我为你写了一些 jsfiddle：https://jsfiddle.net/4twgse1j/

  $(window).scroll(function() {

     let scroll = $(window).scrollTop();
     let placement1,placement2,placement3,placement4

     placement1 = $('#title1-body').height()
     placement2 = placement1 + $('#title2-body').height()
     placement3 = placement2 + $('#title3-body').height()
     placement4 = placement4 + $('#title4-body').height()

    if(scroll<placement1){
      $('.title1-prog div').width( ((scroll/placement1)*100)+'%')
    }

    if(scroll>placement1 && scroll<placement2){
      $('.title2-prog div').width(((scroll-placement1)/(placement2-placement1)*100)+'%')
    }      
  });

我刚刚完成了第 1 和第 2 部分，希望你能掌握模式，然后你可以自己完成第 3 和第 4 部分

【讨论】：