滚动时关注内容状态（JavaScript吗？）_JavaScript

我正在寻找一个库，该库允许在其右侧的内容页面中“关注”我们正在阅读的内容（与滚动相关），我在几个网站上看到了非常相似的内容，并且我认为有一个特定的开放空间与此相关的源库。

几个网站：，

也许有帮助。 看起来您需要什么：

$(function(){
  function sumSection(){
    return $(".container").height()
  }
  function setDimensionBar(){
    $(".bar").css({
      "height": ($(window).height()/sumSection())*100 + "%"
    })
  }
  function setSection(){
        $.each($("section"), function(i, element){
      $(element).css({
        "min-height": $(window).height()
      })
      })
  }

  function addBehaviours(){
    let sections = $("section")
    $.each($(".node"), function(i, element){
      $(element).on("click", function(e){
        e.preventDefault()
        let scroll = $(sections[i]).offset().top
        $('html, body').animate({
          scrollTop: scroll
        }, 500);
      })
    })
  }

  function arrangeNodes(){
    $(".node").remove()
    $.each($("section"), function(i, element){
      let name = $(element).data("name")
      let node = $("<li class='node'><span>"+name+"</span></li>")
      $(".timeline").append(node)

      $(node).css({
        "top": ($(".timeline").height()/$(document).height()) * $(element).offset().top
      })
    })
    addBehaviours()
  }

  $(window).on("scroll", function(){
    let top = (window.scrollY/sumSection())*100
    $(".bar").css({
        "top": top + "%"
      })

  })

  $(window).on("resize", function(){
    setSection()
    arrangeNodes()
    setDimensionBar()
  })

  setTimeout(
    function(){
      setSection()
      arrangeNodes()
      setDimensionBar()      
    },
    200
  )
})

滚动时关注内容状态（JavaScript吗？）

问题描述

1楼