Highlight links in the menu, how?

Question

Data storage

Hello everyone, this is a fairly popular attribute of most modern sites - underlining / highlighting links to sections (Section), links in the navigation menu, highlighting a link occurs when a section hits the viewpoint. Here is an example
I want to know how to implement this, preferably in vanilla js or jquery.
Basic menu markup, and each section has a unique id.

<ul class="menu">
    <li><a href="#">Главная</a></li>
    <li><a href="#">Работа</a></li>
          <li><a href="#">Контакты</a></li>
  </ul>

Explanation:
When scrolling, some block, for example "Work", gets into the viewpoint, and it is necessary that the link to the "Work" block in the menu be highlighted.

Thank you all in advance.

Answer 1

Store in files, don't bother with compression, it has been available in some file systems for a long time, automatic and fast enough (for example, when using btrfs with compression enabled, only those parts of files that can be compressed will be automatically compressed).
When storing one media file - one file on disk, you can use standard web servers (apache / ngnix / ..) to distribute content via their link (by default, this link consists of directories and a file name, nowhere is more convenient).
If you need to give users the ability to upload files to the server, then start looking towards ftp / webdav (browser and windows explorer with authorization) or just sftp (there are convenient clients for everything, but in linux it is regularly available to users)
All technical troubles begin when your load becomes critical for standard tariff plans with your provider, and this usually starts with thousands of active customers)

Answer 2

ftp

Answer 3

var blocks = [];
$('.menu a').each(function(){
  if (this.href[0] == "#") {
    blocks.push($(this.href)) // блоки соответствующие элементам меню
  }
})

$(window).on('scroll resize', function(){ // при скролле (сюда бы еще throttle добавить)
  blocks.forEach(function(block){ // перебираем блоки
    if ($(block).visible(true)) { // если блок на экране
        $('#menu [href="'+block+'"]').closest('li').addClass('active')  // выделяем нужный пункт
           .siblings().removeClass('active') // с соседей выделение снимаем
    })
})

Answer 4

I did not quite understand what you need, well, perhaps such a menu?

Answer 5

I didn't understand either. Something like this is possible - https://codepen.io/Slasher_/pen/KqJGQE

Answer 6

I pulled out from the example that I gave above, everything that concerns .active, the rest is superfluous.
That is, the structure is simple - the viewport falls on the section - the active class is assigned.
$(document).ready(function() {
var e = $("#hamburger"),
t = $("#dropdown");
e.click(function() {
t.slideToggle("fast")
}) , t.find("a").on("click", function() {
$(t).slideToggle()
}), hero = $("#row-hero"), header = $("#header"), clients = $("#clients"), projects = $("#projects"), projectsOffset = projects.offset (), clientsOffset = clients.offset(), contactOffset = $("#contact").offset(), mapCanvasOffset = $("#map-canvas").offset(), heightDifference = $(window).height( ) - (hero.outerHeight() + header.outerHeight() + clients.outerHeight()), $(window).scroll(function() {
$(this).scrollTop() > projectsOffset.top ? ($(this).scrollTop() < mapCanvasOffset.top - 200 && (header.find(".active").removeClass("active"), header.find("[data-nav='projects']") .addClass("active")), header.hasClass("default") && header.hide().removeClass("default").addClass("nav-fixed").fadeIn()) : (header.removeClass( "nav-fixed").addClass("default"), header.find(".active").removeClass("active"), header.find("[data-nav='home']").addClass( "active")), $(this).scrollTop() > mapCanvasOffset.top - 200 && (header.find(".active").removeClass("active"), header.find("[data-nav=' contact']").addClass("active"
var e = $(this).attr("href");
return e.indexOf("#contact") >= 0 && $("#field1").focus(), !1
})
})