Следите за статусом контента при прокрутке (JavaScript?)

Я ищу библиотеку, которая позволяет «следить» за тем, что мы читаем (связанным с нашей прокруткой) на странице контента справа от нее, я видел действительно похожие вещи на нескольких веб-сайтах, и я думаю, что есть конкретный открытый исходная библиотека в связи с этим.

Несколько веб-сайтов: пример 1, пример 2.

javascript scroll

13.02.2019 09:56

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Может это поможет. Похоже, что вам нужно:

$(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
  )
})

Да, второе решение похоже на то, что я ищу. Спасибо !

— 13.02.2019 10:07

@Azrix Вы можете отметить мой ответ как лучший - он может быть полезен другим в будущем

— 13.02.2019 14:17

13.02.2019 10:01