active-scroll-navigation
Version:
Navigation will change active state when user scroll.
35 lines (33 loc) • 923 B
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400" rel="stylesheet">
<link rel="stylesheet" href="/css/app.css">
<title>Active Nav Demo</title>
</head>
<body>
<nav class="main-nav">
<a class="main-nav__item--active" href="#section1">section 1</a>
<a href="#section2">section 2</a>
<a href="#section3">section 3</a>
<a href="#section4">section 4</a>
</nav>
<section id="section1">
<p>Section 1</p>
</section>
<section id="section2">
<p>Section 2</p>
</section>
<section id="section3">
<p>Section 3</p>
</section>
<section id="section4">
<p>Section 4</p>
</section>
<script type="text/javascript" src="js/index.js">
</script>
</body>
</html>