Smooth Scrolling Sticky Navigation

Document

Website

Section 1

별에도 슬퍼하는 어머님, 계십니다. 딴은 시와 노루, 그리고 봅니다. 별 하나 내 이름자 이런 피어나듯이 추억과 어머니 까닭입니다. 아무 우는 시와 비둘기, 위에 이제 많은 듯합니다. 이름을 나는 아무 없이 봅니다. 어머니, 강아지, 한 이름을 까닭입니다.
별 때 내 너무나 했던 마리아 못 벌써 까닭입니다. 오면 별에도 아무 벌레는 둘 계십니다. 별 패, 내 별빛이 가난한 흙으로 소학교 사람들의 봅니다. 불러 많은 둘 않은 까닭입니다. 비둘기, 이국 이런 봅니다.

Section 2

별에도 슬퍼하는 어머님, 계십니다. 딴은 시와 노루, 그리고 봅니다. 별 하나 내 이름자 이런 피어나듯이 추억과 어머니 까닭입니다. 아무 우는 시와 비둘기, 위에 이제 많은 듯합니다. 이름을 나는 아무 없이 봅니다. 어머니, 강아지, 한 이름을 까닭입니다.
별 때 내 너무나 했던 마리아 못 벌써 까닭입니다. 오면 별에도 아무 벌레는 둘 계십니다. 별 패, 내 별빛이 가난한 흙으로 소학교 사람들의 봅니다. 불러 많은 둘 않은 까닭입니다. 비둘기, 이국 이런 봅니다. 하나에 써 가난한 이름을 비둘기, 별 봅니다. 아스라히 쉬이 헤는 속의 봅니다. 아직 이국 풀이 나의 둘 무덤 이름과, 이름자 언덕 봅니다. 내 묻힌 까닭이요, 많은 벌레는 계십니다. 이름과 별 벌써 북간도에 봅니다. 멀리 내린 내일 있습니다. 지나가는 무덤 헤일 우는 그러나 속의 동경과 멀듯이, 까닭입니다. 딴은 별 시와 불러 비둘기, 어머님, 이름과, 있습니다. 사람들의 오면 까닭이요, 시와 보고, 별에도 아침이 있습니다. 가슴속에 새워 딴은 버리었습니다. 밤을 된 계집애들의 써 까닭입니다. 그리워 별 흙으로 그리고 나는 듯합니다.

Section 3

별에도 슬퍼하는 어머님, 계십니다. 딴은 시와 노루, 그리고 봅니다. 별 하나 내 이름자 이런 피어나듯이 추억과 어머니 까닭입니다. 아무 우는 시와 비둘기, 위에 이제 많은 듯합니다. 이름을 나는 아무 없이 봅니다. 어머니, 강아지, 한 이름을 까닭입니다.
별 때 내 너무나 했던 마리아 못 벌써 까닭입니다. 오면 별에도 아무 벌레는 둘 계십니다. 별 패, 내 별빛이 가난한 흙으로 소학교 사람들의 봅니다. 불러 많은 둘 않은 까닭입니다. 비둘기, 이국 이런 봅니다.

Section 4

별에도 슬퍼하는 어머님, 계십니다. 딴은 시와 노루, 그리고 봅니다. 별 하나 내 이름자 이런 피어나듯이 추억과 어머니 까닭입니다. 아무 우는 시와 비둘기, 위에 이제 많은 듯합니다. 이름을 나는 아무 없이 봅니다. 어머니, 강아지, 한 이름을 까닭입니다.
별 때 내 너무나 했던 마리아 못 벌써 까닭입니다. 오면 별에도 아무 벌레는 둘 계십니다. 별 패, 내 별빛이 가난한 흙으로 소학교 사람들의 봅니다. 불러 많은 둘 않은 까닭입니다. 비둘기, 이국 이런 봅니다. 하나에 써 가난한 이름을 비둘기, 별 봅니다. 아스라히 쉬이 헤는 속의 봅니다. 아직 이국 풀이 나의 둘 무덤 이름과, 이름자 언덕 봅니다. 내 묻힌 까닭이요, 많은 벌레는 계십니다. 이름과 별 벌써 북간도에 봅니다. 멀리 내린 내일 있습니다. 지나가는 무덤 헤일 우는 그러나 속의 동경과 멀듯이, 까닭입니다. 딴은 별 시와 불러 비둘기, 어머님, 이름과, 있습니다. 사람들의 오면 까닭이요, 시와 보고, 별에도 아침이 있습니다. 가슴속에 새워 딴은 버리었습니다. 밤을 된 계집애들의 써 까닭입니다. 그리워 별 흙으로 그리고 나는 듯합니다.

Section 5

별에도 슬퍼하는 어머님, 계십니다. 딴은 시와 노루, 그리고 봅니다. 별 하나 내 이름자 이런 피어나듯이 추억과 어머니 까닭입니다. 아무 우는 시와 비둘기, 위에 이제 많은 듯합니다. 이름을 나는 아무 없이 봅니다. 어머니, 강아지, 한 이름을 까닭입니다.
별 때 내 너무나 했던 마리아 못 벌써 까닭입니다. 오면 별에도 아무 벌레는 둘 계십니다. 별 패, 내 별빛이 가난한 흙으로 소학교 사람들의 봅니다. 불러 많은 둘 않은 까닭입니다. 비둘기, 이국 이런 봅니다. 하나에 써 가난한 이름을 비둘기, 별 봅니다. 아스라히 쉬이 헤는 속의 봅니다. 아직 이국 풀이 나의 둘 무덤 이름과, 이름자 언덕 봅니다. 내 묻힌 까닭이요, 많은 벌레는 계십니다. 이름과 별 벌써 북간도에 봅니다. 멀리 내린 내일 있습니다. 지나가는 무덤 헤일 우는 그러나 속의 동경과 멀듯이, 까닭입니다. 딴은 별 시와 불러 비둘기, 어머님, 이름과, 있습니다. 사람들의 오면 까닭이요, 시와 보고, 별에도 아침이 있습니다. 가슴속에 새워 딴은 버리었습니다. 밤을 된 계집애들의 써 까닭입니다. 그리워 별 흙으로 그리고 나는 듯합니다.

©Footer

Code

<!DOCTYPE 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”>
  <title>Document</title>
  <style>
    html{font-size:10px;}
    .body{font-size:1.4rem;line-height:1.8rem; margin:0;}
    .header{background:#455A64;color:#FFF;text-align:center;padding:4rem;}
    .nav{white-space:nowrap;background:#37474F;}
    .nav ul{list-style:none;display:flex;margin:0;padding:0;}
    .nav li{flex:1;padding:1rem;}
    .nav.current{position:fixed;top:0;width:100%;}
    .nav ul li a{color:#FFF;text-decoration:none;padding:1rem;}
    .nav ul li a.current{background:#000;}
    .main{margin-bottom: 30rem;}
    .main section{margin:0 0 2rem;padding:2rem;}
    footer{background:#607D8B;color:#fff; padding:1rem;}
  </style>
</head>
<body class=“body”>
  <header class=“header”>
    <h1>Website</h1>
  </header>
  <nav class=“nav”>
    <ul>
      <li><a href=“#section-1”>Section 1</a>
      </li>
      <li><a href=“#section-2”>Section 2</a>
      </li>
      <li><a href=“#section-3”>Section 3</a>
      </li>
      <li><a href=“#section-4”>Section 4</a>
      </li>
      <li><a href=“#section-5”>Section 5</a>
      </li>
    </ul>
  </nav>
  <main class=“main”>
    <section id=“section-1”>
      <h1>Section 1</h1>
      <p>
        별에도 슬퍼하는 어머님, 계십니다. 딴은 시와 노루, 그리고 봅니다. 별 하나 내 이름자 이런 피어나듯이 추억과 어머니 까닭입니다. 
        아무 우는 시와 비둘기, 위에 이제 많은 듯합니다. 이름을 나는 아무 없이 봅니다. 어머니, 강아지, 한 이름을 까닭입니다.
        <br>별 때 내 너무나 했던 마리아 못 벌써 까닭입니다. 오면 별에도 아무 벌레는 둘 계십니다. 
        별 패, 내 별빛이 가난한 흙으로 소학교 사람들의 봅니다. 불러 많은 둘 않은 까닭입니다. 비둘기, 이국 이런 봅니다.
      </p>
    </section>
    <section id=“section-2”>
      <h1>Section 2</h1>
      <p>
        별에도 슬퍼하는 어머님, 계십니다. 딴은 시와 노루, 그리고 봅니다. 별 하나 내 이름자 이런 피어나듯이 추억과 어머니 까닭입니다. 
        아무 우는 시와 비둘기, 위에 이제 많은 듯합니다. 이름을 나는 아무 없이 봅니다. 어머니, 강아지, 한 이름을 까닭입니다.
        <br>별 때 내 너무나 했던 마리아 못 벌써 까닭입니다. 오면 별에도 아무 벌레는 둘 계십니다. 
        별 패, 내 별빛이 가난한 흙으로 소학교 사람들의 봅니다. 불러 많은 둘 않은 까닭입니다. 비둘기, 이국 이런 봅니다.
      </p>
    </section>
    <section id=“section-3”>
      <h1>Section 3</h1>
      <p>
        별에도 슬퍼하는 어머님, 계십니다. 딴은 시와 노루, 그리고 봅니다. 별 하나 내 이름자 이런 피어나듯이 추억과 어머니 까닭입니다. 
        아무 우는 시와 비둘기, 위에 이제 많은 듯합니다. 이름을 나는 아무 없이 봅니다. 어머니, 강아지, 한 이름을 까닭입니다.
        <br>별 때 내 너무나 했던 마리아 못 벌써 까닭입니다. 오면 별에도 아무 벌레는 둘 계십니다. 
        별 패, 내 별빛이 가난한 흙으로 소학교 사람들의 봅니다. 불러 많은 둘 않은 까닭입니다. 비둘기, 이국 이런 봅니다.
      </p>    
    </section>
    <section id=“section-4”>
      <h1>Section 4</h1>
      <p>
        별에도 슬퍼하는 어머님, 계십니다. 딴은 시와 노루, 그리고 봅니다. 별 하나 내 이름자 이런 피어나듯이 추억과 어머니 까닭입니다. 
        아무 우는 시와 비둘기, 위에 이제 많은 듯합니다. 이름을 나는 아무 없이 봅니다. 어머니, 강아지, 한 이름을 까닭입니다.
        <br>별 때 내 너무나 했던 마리아 못 벌써 까닭입니다. 오면 별에도 아무 벌레는 둘 계십니다. 
        별 패, 내 별빛이 가난한 흙으로 소학교 사람들의 봅니다. 불러 많은 둘 않은 까닭입니다. 비둘기, 이국 이런 봅니다.
      </p>    
    </section>
    <section id=“section-5”>
      <h1>Section 5</h1>
      <p>
        별에도 슬퍼하는 어머님, 계십니다. 딴은 시와 노루, 그리고 봅니다. 별 하나 내 이름자 이런 피어나듯이 추억과 어머니 까닭입니다. 
        아무 우는 시와 비둘기, 위에 이제 많은 듯합니다. 이름을 나는 아무 없이 봅니다. 어머니, 강아지, 한 이름을 까닭입니다.
        <br>별 때 내 너무나 했던 마리아 못 벌써 까닭입니다. 오면 별에도 아무 벌레는 둘 계십니다. 
        별 패, 내 별빛이 가난한 흙으로 소학교 사람들의 봅니다. 불러 많은 둘 않은 까닭입니다. 비둘기, 이국 이런 봅니다.
      </p>    
    </section>
  </main>
  <footer>&copy;Footer</footer>
  <script>
    let mainNavLinks = document.querySelectorAll(“.nav a”);
        let mainSections = document.querySelectorAll(“.main section”);
        const nav = document.querySelector(‘.nav’);
        let topOfNav = nav.offsetTop;
      
    
        function fixNav() {
          if (window.scrollY >= topOfNav) {
            nav.classList.add(‘current’);
          } else {
            nav.classList.remove(‘current’);
          }
        }
    
        window.addEventListener(“scroll”, event => {
          fixNav(); 
          let fromTop = window.scrollY;
    
          mainNavLinks.forEach(link => {
            let section = document.querySelector(link.hash);
             
            mainNavLinks.onclick = function() {
               mainNavLinks.classList.toggle(‘current’);
            }
    
            if (section.offsetTop <= fromTop && section.offsetTop + section.offsetHeight > fromTop) { 
              link.classList.add(“current”);
            } else {
              link.classList.remove(“current”);
            }
          });
    
        });
  </script>
</body>
</html>