Как называется/реализовать sroll эффект?

174

08 мая 2019, 22:40

На сайте есть header, внутри которого есть list с якорями на секции. Необходимо менять их состояние (цвет текста, ну или что - то другое), при достижении секции блоком header.

Мой старый пример для наглядности, но он очень как по мне плохой. Так как будет отслеживаться событие scroll, то нужно по идеи предотвратить холостые вызовы функции по типу: когда header достигает нужную секцию, то он list__item задает class, но он это будет делать на протяжении всего расстояния, пока не достигнет другой секции. Такое поведение надо предотвратить.

	$(document).on('scroll', function() { 
		$('.menu__link').each(function() { 
			var anchor = $(this).attr('href'); 
			if ( $(document).scrollTop() >= $(anchor).offset().top - $('.header').outerHeight()) { 
				$('.menu__link').removeClass('current'); 
				$(this).filter('[href="'+ anchor +'"]').addClass('current'); 
			} else if ( $(window).scrollTop() + $(window).outerHeight() >=  
				$('.footer').offset().top ) { 
					$('.menu__link').removeClass('current'); 
					$(this).filter('[href="'+ anchor +'"]').addClass('current'); 
			} 
		}); 
	});

*, 
*:before, 
*:after { 
  box-sizing: border-box; 
} 
 
body, 
p, 
figure, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
  margin: 0; 
} 
 
ul, 
ol, 
dl, 
li, 
menu { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
} 
 
input[type="search"]::-webkit-search-cancel-button { 
  display: none; 
} 
 
button { 
  outline: none; 
  border: none; 
  padding: 0; 
} 
 
input, 
select { 
  outline: none; 
  border: none; 
} 
 
a { 
  text-decoration: none; 
} 
 
i { 
  font-style: normal; 
} 
 
img { 
  max-width: 100%; 
  vertical-align: middle; 
  border: none; 
} 
 
.header { 
  width: 100%; 
  position: fixed; 
  background: #000; 
} 
 
.menu { 
  display: flex; 
  justify-content: space-around; 
  padding: 20px 0; 
} 
 
.menu__link { 
  color: #fff; 
  font-size: 18px; 
  font-weight: bold; 
} 
 
.current { 
  color: #784; 
} 
 
section { 
  height: 800px; 
} 
 
#first { 
  background: #641; 
} 
 
#second { 
  background: #453; 
} 
 
#third { 
  background: #834; 
} 
 
.footer { 
  height: 600px; 
  background: #761; 
}

<!DOCTYPE html> 
<html lang="uk"> 
<head> 
  <meta charset="utf-8" /> 
  <title>Scroll</title> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> 
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
</head> 
 
<body class="page"> 
  <header class="header"> 
    <menu class="menu header__menu"> 
      <li class="menu__item"> 
        <a href="#first" class="menu__link current">First</a> 
      </li> 
      <li class="menu__item"> 
        <a href="#second" class="menu__link">Second</a> 
      </li> 
      <li class="menu__item"> 
        <a href="#third" class="menu__link">Third</a> 
      </li> 
    </menu> 
  </header> 
  <main class="main"> 
    <section id="first"></section> 
    <section id="second"></section> 
    <section id="third"></section> 
  </main> 
  <footer class="footer"></footer> 
</body> 
 
</html>