Scrolling Sticky Navigation – Right

Scrolling Sticky Navigation – Right

Introduction

Request & Response

Authentication

Endpoints

Root

Cities Overview

City Detail

City Config

City Spots Overview

City Spot Detail

City Icons Overview

City Icon Detail

Expanders

Filters

Code

<!DOCTYPE html>
<html lang=“ko”>
<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>Scrolling Sticky Navigation – Right</title>
  <style>
    html{scroll-behavior:smooth;}
    .body{margin: 0; padding: 0;}
    .main > nav{position:sticky; top:0; align-self:start; height:100%;}
    .main {display:flex; margin-right:auto; border:1px solid #ddd;}
    .main > div {flex:auto;}
    .main > div h2 {margin:0 0 1rem; font-size:16px; color:#236aa9}
    .main section{ font-size:14px; padding: 30px; margin-bottom:200px; color:#236aa9}
    .main > div h3 {font-size:14px; color:#888;}
    .section-nav li.active > a{color:#333;font-weight:500;}
    .section-nav{padding-left:0;border-left:1px solid #efefef;padding-right:30px;}
    .section-nav a{text-decoration:none;display:block; color:#ccc;transition:all 50ms ease-in-out;padding:.125rem 0;}
    .section-nav a:hover,.section-nav a:focus{color:#666;}
    .menu, .menu ul {list-style:none;}
    .menu {flex:1;}
    .menu li{margin-left:1rem;}
  </style>
</head>
<body class=“body”>
  <main class=“main”>
    <div>
      <section id=“introduction”>
        <h2>Introduction</h2>
      </section>
      <section id=“request-response”>
        <h2>Request & Response</h2>
      </section>
      <section id=“authentication”>
        <h2>Authentication</h2>
      </section>
      <section id=“endpoints”>
        <h2>Endpoints</h2>
        <section id=“endpoints–root”>
          <h3>Root</h3>
        </section>
        <section id=“endpoints–cities-overview”>
          <h3>Cities Overview</h3>
        </section>
        <section id=“endpoints–city-detail”>
          <h3>City Detail</h3>
        </section>
        <section id=“endpoints–city-config”>
          <h3>City Config</h3>
        </section>
        <section id=“endpoints–city-spots-overview”>
          <h3>City Spots Overview</h3>
        </section>
        <section id=“endpoints–city-spot-detail”>
          <h3>City Spot Detail</h3>
        </section>
        <section id=“endpoints–city-icons-overview”>
          <h3>City Icons Overview</h3>
        </section>
        <section id=“endpoints–city-icon-detail”>
          <h3>City Icon Detail</h3>
        </section>
      </section>
      <section id=“links”>
        <h2>Links</h2>
      </section>
      <section id=“expanders”>
        <h2>Expanders</h2>
      </section>
      <section id=“filters”>
        <h2>Filters</h2>
      </section>
    </div>
    <nav class=“section-nav”>
      <ul class=“menu”>
        <li><a href=“#introduction”>Introduction</a></li>
        <li><a href=“#request-response”>Request & Response</a></li>
        <li><a href=“#authentication”>Authentication</a></li>
        <li><a href=“#endpoints”>Endpoints</a>
          <ul>
            <li><a href=“#endpoints–root”>Root</a></li>
            <li><a href=“#endpoints–cities-overview”>Cities Overview</a></li>
            <li><a href=“#endpoints–city-detail”>City Detail</a></li>
            <li><a href=“#endpoints–city-config”>City Config</a></li>
            <li><a href=“#endpoints–city-spots-overview”>City Spots Overview</a></li>
            <li><a href=“#endpoints–city-spot-detail”>City Spot Detail</a></li>
            <li><a href=“#endpoints–city-icons-overview”>City Icons Overview</a></li>
            <li><a href=“#endpoints–city-icon-detail”>City Icon Detail</a></li>
          </ul>
        </li>
        <li><a href=“#links”>Links</a></li>
        <li><a href=“#expanders”>Expanders</a></li>
        <li><a href=“#filters”>Filters</a></li>
      </ul>
    </nav>
  </main>
 
  <script>
  (function () { 
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        const id = entry.target.getAttribute(‘id’);
        if (entry.intersectionRatio > 0) {
          document.querySelector(`.section-nav a[href=”#${id}“]`).parentElement.classList.add(‘active’);
        } else {
          document.querySelector(`.section-nav a[href=”#${id}“]`).parentElement.classList.remove(‘active’);
        }
      });
    });
 
    document.querySelectorAll(‘.main section[id]’).forEach((section) => {
      observer.observe(section);
    });
 
  })();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang=“ko”>
<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>Scrolling Sticky Navigation – Right</title>
  <style>
    html{scroll-behavior:smooth;}
    .body{margin0padding0;}
    .main > nav{position:stickytop:0align-self:startheight:100%;}
    .main {display:flexmargin-right:autoborder:1px solid #ddd;}
    .main > div {flex:auto;}
    .main > div h2 {margin:0 0 1remfont-size:16pxcolor:#236aa9}
    .main sectionfont-size:14pxpadding30pxmargin-bottom:200pxcolor:#236aa9}
    .main > div h3 {font-size:14pxcolor:#888;}
    .section-nav li.active > a{color:#333;font-weight:500;}
    .section-nav{padding-left:0;border-left:1px solid #efefef;padding-right:30px;}
    .section-nav a{text-decoration:none;display:blockcolor:#ccc;transition:all 50ms ease-in-out;padding:.125rem 0;}
    .section-nav a:hover,.section-nav a:focus{color:#666;}
    .menu.menu ul {list-style:none;}
    .menu {flex:1;}
    .menu li{margin-left:1rem;}
  </style>
</head>
<body class=“body”>
  <main class=“main”>
    <div>
      <section id=“introduction”>
        <h2>Introduction</h2>
      </section>
      <section id=“request-response”>
        <h2>Request & Response</h2>
      </section>
      <section id=“authentication”>
        <h2>Authentication</h2>
      </section>
      <section id=“endpoints”>
        <h2>Endpoints</h2>
        <section id=“endpoints–root”>
          <h3>Root</h3>
        </section>
        <section id=“endpoints–cities-overview”>
          <h3>Cities Overview</h3>
        </section>
        <section id=“endpoints–city-detail”>
          <h3>City Detail</h3>
        </section>
        <section id=“endpoints–city-config”>
          <h3>City Config</h3>
        </section>
        <section id=“endpoints–city-spots-overview”>
          <h3>City Spots Overview</h3>
        </section>
        <section id=“endpoints–city-spot-detail”>
          <h3>City Spot Detail</h3>
        </section>
        <section id=“endpoints–city-icons-overview”>
          <h3>City Icons Overview</h3>
        </section>
        <section id=“endpoints–city-icon-detail”>
          <h3>City Icon Detail</h3>
        </section>
      </section>
      <section id=“links”>
        <h2>Links</h2>
      </section>
      <section id=“expanders”>
        <h2>Expanders</h2>
      </section>
      <section id=“filters”>
        <h2>Filters</h2>
      </section>
    </div>
    <nav class=“section-nav”>
      <ul class=“menu”>
        <li><a href=“#introduction”>Introduction</a></li>
        <li><a href=“#request-response”>Request & Response</a></li>
        <li><a href=“#authentication”>Authentication</a></li>
        <li><a href=“#endpoints”>Endpoints</a>
          <ul>
            <li><a href=“#endpoints–root”>Root</a></li>
            <li><a href=“#endpoints–cities-overview”>Cities Overview</a></li>
            <li><a href=“#endpoints–city-detail”>City Detail</a></li>
            <li><a href=“#endpoints–city-config”>City Config</a></li>
            <li><a href=“#endpoints–city-spots-overview”>City Spots Overview</a></li>
            <li><a href=“#endpoints–city-spot-detail”>City Spot Detail</a></li>
            <li><a href=“#endpoints–city-icons-overview”>City Icons Overview</a></li>
            <li><a href=“#endpoints–city-icon-detail”>City Icon Detail</a></li>
          </ul>
        </li>
        <li><a href=“#links”>Links</a></li>
        <li><a href=“#expanders”>Expanders</a></li>
        <li><a href=“#filters”>Filters</a></li>
      </ul>
    </nav>
  </main>

 

  <script>
  (function () { 
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        const id = entry.target.getAttribute(‘id’);
        if (entry.intersectionRatio > 0) {
          document.querySelector(`.section-nav a[href=”#${id}“]`).parentElement.classList.add(‘active’);
        } else {
          document.querySelector(`.section-nav a[href=”#${id}“]`).parentElement.classList.remove(‘active’);
        }
      });
    });

 

    document.querySelectorAll(‘.main section[id]’).forEach((section=> {
      observer.observe(section);
    });

 

  })();
  </script>
</body>
</html>