9 활성화메뉴

1. 메뉴활성화

1.1. 단계1-상단메뉴

1.1.1. 스티키

예제
HTML
CSS
JQ
JS

  <!DOCTYPE html>
  <html lang="ko">
    <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Document</title>
      <meta property="og:title" content="발전하는 신입 퍼블리셔 망고의 포트폴리오입니다" />
      <meta property="og:url" content="http://www.mango.dothome.co.kr" />
      <meta property="og:type" content="website" />
      <!-- <meta property="og:image" content="...">  -->
      <meta property="og:site_name" content="망고의 포트폴리오" />
      <meta property="og:description" content="오늘보다는 내일 더 성장하는 것이 목표인 퍼블리셔의 포트폴리오입니다." />
      <meta name="twitter:card" content="summary" />
      <meta name="twitter:title" content="발전하는 신입 퍼블리셔 망고의 포트폴리오입니다" />
      <meta name="twitter:description" content="오늘보다는 내일 더 성장하는 것이 목표인 퍼블리셔의 포트폴리오입니다." />
      <!-- <meta name="twitter:image" content="..." /> -->
      <link rel="stylesheet" href="css/reset.css" />
      <link rel="stylesheet" href="css/style.css" />
    </head>

    <body>
      <nav>
        <ul class="gnb">
          <li class="on"><a href="#section1">section1</a></li>
          <li><a href="#section2">section2</a></li>
          <li><a href="#section3">section3</a></li>
          <li><a href="#section4">section4</a></li>
          <li><a href="#section5">section5</a></li>
          <li><a href="#section6">section6</a></li>
          <li><a href="#section7">section7</a></li>
          <li><a href="#section8">section8</a></li>
          <li><a href="#section9">section9</a></li>
        </ul>
      </nav>
      <ul class="sideNav">
        <li class="on"><a href="#section1">section1</a></li>
        <li><a href="#section2">section2</a></li>
        <li><a href="#section3">section3</a></li>
        <li><a href="#section4">section4</a></li>
        <li><a href="#section5">section5</a></li>
        <li><a href="#section6">section6</a></li>
        <li><a href="#section7">section7</a></li>
        <li><a href="#section8">section8</a></li>
        <li><a href="#section9">section9</a></li>
      </ul>
      <main class="container">
        <section class="section" id="section1">section1</section>
        <section class="section" id="section2">section2</section>
        <section class="section" id="section3">
          <div class="ball">ball</div>
          section3
        </section>
        <section class="section" id="section4">section4</section>
        <section class="section" id="section5">section5</section>
        <section class="section" id="section6">section6</section>
        <section class="section" id="section7">section7</section>
        <section class="section" id="section8">section8</section>
        <section class="section" id="section9">section9</section>
      </main>
      <script src="https://code.jquery.com/jquery-1.12.0.js"></script>
      <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
      <script src="jq.js"></script>
    </body>
  </html>

reset다운로드

  @charset 'UTF-8';
  @import url('https://fonts.googleapis.com/css2?family=Black+And+White+Picture&family=Noto+Sans+KR:wght@100; 300; 400; 500; 700; 900&display=swap');
  html {
    overflow-x: hidden;
  }
  html,
  body,
  a,
  table {
    font-family: 'Black And White Picture', sans-serif;
    font-family: 'Noto Sans KR', sans-serif;
  }
  ul,
  li,
  ol {
    list-style: none;
  }
  a {
    text-decoration: none;
  }

  body::-webkit-scrollbar {
    width: 1em;
    background-color: red;
    background-image: repeating-conic-gradient(#474bff 0% 25%, #47d3ff 0% 50%);
    background-position: 0 0, 38px 38px;
    background-size: 46px 76px;
    background-color: #47d3ff;
  }
  body::-webkit-scrollbar-thumb {
  }
  body::-webkit-scrollbar-button {
    width: 3em;
    height: 3em;
    background-color: #282972;
    box-shadow: 1px 1px 3px #000;
  }
  body::-webkit-scrollbar-thumb {
    width: 10em;
    height: 10em;
    background-color: #47d3ff;
    background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
    border-radius: 3px 0 0 3px;
    box-shadow: 1px 1px 4px #000;
  }
  /* nav */
  nav {
    position: absolute;
    top: 0;
    z-index: 2;
    background: rgba(0, 0, 0, 0.4);
    padding: 1em 1.4em;
    width: 100%;
  }
  nav.sticky {
    background: rgba(255, 0, 100, 0.6);
    position: fixed;
    z-index: 222;
  }
  nav .gnb {
    display: flex;
    width: 100%;
    max-width: 1600px;
    margin: auto;
  }
  nav .gnb li {
    flex: 1 1 200px;
  }
  nav .gnb li a {
    color: #fff;
    display: inline-block;
    padding: 0.2rem;
    text-align: center;
    line-height: 2rem;
    height: 2rem;
    position: relative;
  }
  nav .gnb li a:before,
  nav .gnb li a:after {
    position: absolute;
    content: '';
    left: 0;
    width: 100%;
    height: 2px;
    background: #000;
    transform: scaleX(0);
    transition: all 0.5s;
  }
  nav .gnb li a:before {
    top: 0;
    transform-origin: left;
  }
  .gnb li a:after {
    bottom: 0;
    transform-origin: right;
  }
  nav .gnb li.on a:before,
  nav .gnb li a:hover:before,
  nav .gnb li.on a:after,
  nav .gnb li a:hover:after {
    transform: scaleX(1);
  }
  .container {
  }
  section {
    min-height: 100vh;
    line-height: 100vh;
    text-align: center;
    background-color: yellow;
    margin: 40vw auto;
  }
  section::selection {
    color: red;
    background-color: #00eeff;
  }

  /* sideNav  */
  .sideNav {
    position: fixed;
    top: 10%;
    right: 10%;
    z-index: 999;
  }
  .sideNav a {
    display: inline-block;
    padding: 1em;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    margin-bottom: 1em;
  }
  .sideNav li.on a::before {
    content: '😺';
  }

  /* sectionIn */
  section {
    position: relative;
  }
  section .ball {
    position: absolute;
    background-color: skyblue;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    left: -450px;
    transition: left 1s;
  }
  section.on .ball {
    left: 100px;
  }

  let win = $(window),
    sections = $('.section'),
    gnb = $('.gnb li'),
    sideNav = $('.sideNav>li');

  const gnbOff = () => {
    gnb.each(() => {
      this.removeClass('on');
    });
  };

  gnb.click(function (e) {
    e.preventDefault();
    let tg = $(this);
    let index = tg.index();
    let section = sections.eq(index);
    let offset = section.offset().top;
    $('html,body').stop().animate({ scrollTop: offset }, 1000, 'easeOutCirc');
  });
  sideNav.click(function (e) {
    e.preventDefault();
    let tg = $(this);
    let index = tg.index();
    let section = sections.eq(index);
    let offset = section.offset().top;
    $('html,body').stop().animate({ scrollTop: offset }, 1000, 'easeOutCirc');
  });

  win.scroll(function () {
    let sct = win.scrollTop();
    sections.each(function (i) {
      if (sct >= sections.eq(i).offset().top - 300) {
        $('.gnb li').eq(i).addClass('on').siblings().removeClass('on');
        sideNav.eq(i).addClass('on').siblings().removeClass('on');
        sections.eq(i).addClass('on').siblings().removeClass('on');
      }
    });
    sct > 400 ? $('nav').addClass('sticky') : $('nav').removeClass('sticky');
  });

let win = window,
  winSct,
  sections = document.querySelectorAll('.section'),
  gnb = document.querySelectorAll('.gnb li'),
  sideNav = document.querySelectorAll('.sideNav>li');

const gnbOff = () => {
  gnb.forEach((o) => {
    o.classList.remove('on');
  });
};
const navOff = () => {
  sideNav.forEach((o) => {
    o.classList.remove('on');
  });
};

gnb.forEach((el) => {
  el.addEventListener('click', function (e) {
    e.preventDefault();
    document.querySelector(el.firstChild.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
    gnbOff();
    el.classList.add('on');
  });
});
sideNav.forEach((el) => {
  el.addEventListener('click', function (e) {
    e.preventDefault();
    document.querySelector(el.firstChild.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
    navOff();
    el.classList.add('on');
  });
});

win.addEventListener('scroll', function (e) {
  e.preventDefault();
  winSct = this.scrollY;
  winSct >= 400 ? document.querySelector('nav').classList.add('sticky') : document.querySelector('nav').classList.remove('sticky');
  scrollOn(winSct);
});

const scrollOn = (sct) => {
  if (sct >= sections[0].offsetTop - 300) {
    gnbOff();
    navOff();
    document.querySelector('.gnb li:nth-child(1)').classList.add('on');
    document.querySelector('.sideNav li:nth-child(1)').classList.add('on');
    sections[0].classList.add('on');
  }
  if (sct >= sections[1].offsetTop - 300) {
    gnbOff();
    navOff();
    document.querySelector('.gnb li:nth-child(2)').classList.add('on');
    document.querySelector('.sideNav li:nth-child(2)').classList.add('on');
    sections[1].classList.add('on');
  }
  if (sct >= sections[2].offsetTop - 700) {
    gnbOff();
    navOff();
    document.querySelector('.gnb li:nth-child(3)').classList.add('on');
    document.querySelector('.sideNav li:nth-child(3)').classList.add('on');
    sections[2].classList.add('on');
  }
  if (sct >= sections[3].offsetTop - 300) {
    gnbOff();
    navOff();
    document.querySelector('.gnb li:nth-child(4)').classList.add('on');
    document.querySelector('.sideNav li:nth-child(4)').classList.add('on');
  }
  if (sct >= sections[4].offsetTop - 300) {
    gnbOff();
    navOff();
    document.querySelector('.gnb li:nth-child(5)').classList.add('on');
    document.querySelector('.sideNav li:nth-child(5)').classList.add('on');
  }
  if (sct >= sections[5].offsetTop - 300) {
    gnbOff();
    navOff();
    document.querySelector('.gnb li:nth-child(6)').classList.add('on');
    document.querySelector('.sideNav li:nth-child(6)').classList.add('on');
  }
  if (sct >= sections[6].offsetTop - 300) {
    gnbOff();
    navOff();
    document.querySelector('.gnb li:nth-child(7)').classList.add('on');
    document.querySelector('.sideNav li:nth-child(7)').classList.add('on');
  }
  if (sct >= sections[7].offsetTop - 300) {
    gnbOff();
    navOff();
    document.querySelector('.gnb li:nth-child(8)').classList.add('on');
    document.querySelector('.sideNav li:nth-child(8)').classList.add('on');
  }
  if (sct >= sections[8].offsetTop - 300) {
    gnbOff();
    navOff();
    document.querySelector('.gnb li:nth-child(9)').classList.add('on');
    document.querySelector('.sideNav li:nth-child(2)').classList.add('on');
  }
};