@DeniSidorenko

Как перфекционировать скрипт?

Добрый день есть такая структура страницы
<div class="wrapper">
	<div class="aside">
		<a href="#sectione_one"></a>
		<a href="#sectione_two"></a>
		<a href="#sectione_three"></a>
		<a href="#sectione_four"></a>
		<a href="#sectione_five"></a>
	</div>
	<div class="content">
		<section id="sectione_one"></section>
		<section id="sectione_two"></section>
		<section id="sectione_three"></section>
		<section id="sectione_four"></section>
		<section id="sectione_five"></section>
	</div>
</div>


Aside фиксированно слева. И это навигационое меню
Надо сделать что бы при скролле если видно в поле зрение браузера секцию a принимает класс active
id страницы и href a совпадают

Так вот скрипт( с использование библиотеки)

$('#sectione_one').on('inview', function(event, isInView) {
  if (isInView) {
    $('.aside a').addClass('active');
    console.log('вижу')
  } else {
   $('.aside a').removeClass('active');
   console.log('не вижу')
  }
});

Тут когда дохожу до секции #reviews a из aside получает класс active. Прикол в том что сейчас получает активе класс все все сылки, мне же надо что только сылка которая совпадает с id секции. Так же не могу понять как сделать что бы каждую секцию с id сам пробивал скрипт а не мне писать ид секции для каждого
  • Вопрос задан
  • 136 просмотров
Решения вопроса 1
@akaincore
$('.content > section').on('...', function () {
  	$('.aside > a').removeClass('active');
  	$('.aside a[href="#' + $(this).attr('id') + '"]').addClass('active');
  });
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
leni_m
@leni_m
ЧупаКобрус
мб так?
function lol(id) {
  $('#'+id).on('inview', function(event, isInView) {
  if (isInView) {
    $('a[href="#'+id+'"]').addClass('active');
    console.log('вижу')
  } else {
   $('a[href="#'+id+'"]').removeClass('active');
   console.log('не вижу')
  }
});
}
lol('sectione_one');
lol('sectione_two');
...
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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