Почему не срабатывает скрипт подсветки активных пунктов меню?

Question

Владимир Новицкий @Novitsky

Веб-разработчик, дизайнер, фотограф

JavaScript

Почему не срабатывает скрипт подсветки активных пунктов меню?

Есть скрипт для подсветки активных пунктов меню при ссылках на якоря:

jQuery(function($) {
    $(window).scroll(function() {
        $(".scrollbox").each(function() {
            var window_top = $(window).scrollTop();
            var div_top = $(this).offset().top;
            var div_1 = $(this).attr('id');
            if (window_top > div_top - 120) {
                $('#menu').find('li').removeClass('current');
                $('#menu').find('li[class="' +div_1+ '"]').addClass('current');
            } else {
                $('#menu').find('li[class="' +div_1+ '"]').removeClass('current');
            };
        });
    });
});

Пример взят отсюда.
Его суть в том, что при прокрутке у первого пункта меню удаляется класс current и добавляется к пункту меню, ссылка которого ведет на блок, отображаемый в данный момент на странице.
Так вот, скрипт удаляет класс, а к следующему пункту меню почему-то не подставляет его.
То есть, вот эта строчка выполняется:
$('#menu').find('li').removeClass('current');
А дальше нет.
Живой пример.

В чем ошибка?

Вопрос задан более трёх лет назад
2613 просмотров

4 комментария

Подписаться 2 Оценить 4 комментария

Пригласить эксперта

Ответы на вопрос 1

1 комментарий

Владимир Новицкий @Novitsky Автор вопроса

У меня работает:

jQuery(function($) {
    	$(window).scroll(function() {
        		$(".scrollbox").each(function() {
            			var window_top = $(window).scrollTop();
            			var div_top = $(this).offset().top;
			            var div_1 = $(this).attr('id');
            			if (window_top < $('.flick-inner').height() - 200) {
				                $('#menu').find('li').first().addClass('current');
                				$('#menu').find('li').next().removeClass('current');
			            } else if (window_top > div_top - 200) {
				                $('#menu').find('li').removeClass('current');
				                $('#menu').find('li[class="' + div_1 + 'Item"]').addClass('current');
            			} else {
				                $('#menu').find('li[class="' + div_1 + 'Item"]').removeClass('current');
            			};
        		});
    	});
});

Вот пример: novi.co/test/car-fin

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+1 ещё

Средний
Как задать img источник из svg inline?
- 1 подписчик
- 23 минуты назад
- 17 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- час назад
- 21 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Как сформировать маску, используя регулярное выражение?
- 1 подписчик
- 2 часа назад
- 53 просмотра
2

ответа
JavaScript

+1 ещё

Средний
При создании PWA ошибка Cannot read properties of null (reading 'prompt'), в чем проблема?
- 1 подписчик
- 4 часа назад
- 30 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как сделать так, чтобы клик по object передавался родителю?
- 1 подписчик
- 5 часов назад
- 90 просмотров
2

ответа
JavaScript

+1 ещё

Средний
Как сделать программную навигацию без изменения url в vue-router + vue3?
- 1 подписчик
- 16 часов назад
- 39 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как скачать pdf из встроенного просмотрщика на сайте?
- 1 подписчик
- 22 часа назад
- 131 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Как построение маршрута на 2GIS API v2.0?
- 1 подписчик
- вчера
- 54 просмотра
0

ответов
JavaScript

Средний
Эффект наложения блоков?
- 1 подписчик
- вчера
- 110 просмотров
2

ответа
JavaScript

+2 ещё

Средний
Как изменить содержание блока програмно со свойством contentEditable?
- 1 подписчик
- вчера
- 91 просмотр
0

ответов
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Сверстать 3 страницы для WebApp и 1 Web

25 апр. 2024, в 13:36

2000 руб./за проект

Интегрировать в flutter проект storekit external link (ios)

25 апр. 2024, в 13:21

5000 руб./за проект

Реализовать часть интерфейса для образовательных курсов на React

25 апр. 2024, в 13:13

5000 руб./за проект

Значение div_1 проверяли? Соответствует классу?
И уверены ли Вы, что find('li'), что удаляет класс, всегда будет указывать на нужный элемент списка?
Urukhayy: вроде все проверял несколько раз.
Вот живой пример: novi.co/test/acrostia
Если посмотреть в консоли, то видно, что класс удаляется, но к другому пункту не добавляется.

Answer 1 · 2015-02-22 20:22:07

У меня та же проблема, скрипт не работает ни в первом, ни во втором варианте
вот мой скрипт:

jQuery(function ($) {
$(window).scroll(function(){
$(".metka").each(function () {
var window_top = $(window).scrollTop();
var div_top = $(this).offset().top;
var div_1 = $(this).attr('id');
if (window_top > div_top - 120){
$('#smenu').find('a').removeClass('uMenuItemA');
$('#smenu').find('a[class="'+div_1+'"]').addClass('uMenuItemA');
}
else{
$('#smenu').find('a[class="'+div_1+'"]').removeClass('uMenuItemA');
};
});
});
});

при прокрутке у первого пункта меню удаляется класс uMenuItemA, но потом не добавляет его к следующим пунктам

мой сайт

подскажите где ошибся, заранее спаибо

Почему не срабатывает скрипт подсветки активных пунктов меню?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт