Выделение ссылок в меню, как?

Question

[Faha1998]

Привет всем, это довольно популярный аттрибут большинства современных сайтов - подчеркивание/выделение ссылок на секции(Section), ссылки в меню навигации, выделение ссылки происходит при попадание секции в viewpoint. Вот пример
Хочу узнать как такое реализовать, желательно на ванильном js или jquery.
Базовая разметка меню, и каждая секция имеет уникальный id.

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

Пояснение:
При скроле, во viewpoint попадает какой нибудь блок, например "Работа", и нужно, что бы ссылка на блок "Работа" в меню выделялась.

Заранее всем спасибо.

Comments

[Антон Иванов]

Вы меня извините, но я вообще ничего не понял

Answer 1

[Stalker_RED]

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') // с соседей выделение снимаем
    })
})

Comments

[Faha1998]

Здравствуйте, ваше решение выглядит очень красивым и кратким, но на jquery 3.2.1 оно просто вылетает с ошибкой на строчке blocks.push, кроме того функции visible я не нашел, не могли бы вы помочь понять ваш код

[Stalker_RED]

Фахриддин Абдурахимов: jQuery.visible() - это плагин.
Если вылетает ошибка - было бы круто писать какая именно.

Переписал без плагина: https://jsfiddle.net/6v2tepxx/

[Faha1998]

Stalker_RED: Спасибо за хорошо прокомментированный код.

Answer 2

[twobomb]

Я не совсем понял что вам нужно, ну наверно такое меню?

Answer 3

[campus1]

Я тоже непонял. Возможна что-то такое - https://codepen.io/Slasher_/pen/KqJGQE

Answer 4

[Zombie42679]

Выдернул из примера, который привёл выше, всё что касается .active, остальное лишнее.
То есть структура проста - вьюпорт попадает на секцию - присваивается класс active .

$(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"))
}), $("a").click(function() {
$("html, body").stop().animate({
scrollTop: $($.attr(this, "href")).offset().top
}, 750);
var e = $(this).attr("href");
return e.indexOf("#contact") >= 0 && $("#field1").focus(), !1
})
})

Comments

[Faha1998]

Спасибо, буду разбираться, надо бы деминимизировать его код.