07 activeMenu
1. 메뉴활성화
1.1. 단계1-상단메뉴
1.1.1. 스티키
- 예제
- HTML
- CSS
- JQ
- JS
1 <!DOCTYPE html>2 <html lang="ko">3 <head>4 <meta charset="UTF-8" />5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />7 <title>Document</title>8 <meta property="og:title" content="발전하는 신입 퍼블리셔 망고의 포트폴리오입니다" />9 <meta property="og:url" content="http://www.mango.dothome.co.kr" />10 <meta property="og:type" content="website" />11
12 <meta property="og:site_name" content="망고의 포트폴리오" />13 <meta property="og:description" content="오늘보다는 내일 더 성장하는 것이 목표인 퍼블리셔의 포트폴리오입니다." />14 <meta name="twitter:card" content="summary" />15 <meta name="twitter:title" content="발전하는 신입 퍼블리셔 망고의 포트폴리오입니다" />16 <meta name="twitter:description" content="오늘보다는 내일 더 성장하는 것이 목표인 퍼블리셔의 포트폴리오입니다." />17
18 <link rel="stylesheet" href="css/reset.css" />19 <link rel="stylesheet" href="css/style.css" />20 </head>21
22 <body>23 <nav>24 <ul class="gnb">25 <li class="on"><a href="#section1">section1</a></li>26 <li><a href="#section2">section2</a></li>27 <li><a href="#section3">section3</a></li>28 <li><a href="#section4">section4</a></li>29 <li><a href="#section5">section5</a></li>30 <li><a href="#section6">section6</a></li>31 <li><a href="#section7">section7</a></li>32 <li><a href="#section8">section8</a></li>33 <li><a href="#section9">section9</a></li>34 </ul>35 </nav>36 <ul class="sideNav">37 <li class="on"><a href="#section1">section1</a></li>38 <li><a href="#section2">section2</a></li>39 <li><a href="#section3">section3</a></li>40 <li><a href="#section4">section4</a></li>41 <li><a href="#section5">section5</a></li>42 <li><a href="#section6">section6</a></li>43 <li><a href="#section7">section7</a></li>44 <li><a href="#section8">section8</a></li>45 <li><a href="#section9">section9</a></li>46 </ul>47 <main class="container">48 <section class="section" id="section1">section1</section>49 <section class="section" id="section2">section2</section>50 <section class="section" id="section3">51 <div class="ball">ball</div>52 section353 </section>54 <section class="section" id="section4">section4</section>55 <section class="section" id="section5">section5</section>56 <section class="section" id="section6">section6</section>57 <section class="section" id="section7">section7</section>58 <section class="section" id="section8">section8</section>59 <section class="section" id="section9">section9</section>60 </main>61 <script src="https://code.jquery.com/jquery-1.12.0.js"></script>62 <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>63 <script src="jq.js"></script>64 </body>65 </html>1 @charset 'UTF-8';2 @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');3 html {4 overflow-x: hidden;5 }6 html,7 body,8 a,9 table {10 font-family: 'Black And White Picture', sans-serif;11 font-family: 'Noto Sans KR', sans-serif;12 }13 ul,14 li,15 ol {16 list-style: none;17 }18 a {19 text-decoration: none;20 }21
22 body::-webkit-scrollbar {23 width: 1em;24 background-color: red;25 background-image: repeating-conic-gradient(#474bff 0% 25%, #47d3ff 0% 50%);26 background-position: 0 0, 38px 38px;27 background-size: 46px 76px;28 background-color: #47d3ff;29 }30 body::-webkit-scrollbar-thumb {31 }32 body::-webkit-scrollbar-button {33 width: 3em;34 height: 3em;35 background-color: #282972;36 box-shadow: 1px 1px 3px #000;37 }38 body::-webkit-scrollbar-thumb {39 width: 10em;40 height: 10em;41 background-color: #47d3ff;42 background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);43 border-radius: 3px 0 0 3px;44 box-shadow: 1px 1px 4px #000;45 }46 /* nav */47 nav {48 position: absolute;49 top: 0;50 z-index: 2;51 background: rgba(0, 0, 0, 0.4);52 padding: 1em 1.4em;53 width: 100%;54 }55 nav.sticky {56 background: rgba(255, 0, 100, 0.6);57 position: fixed;58 z-index: 222;59 }60 nav .gnb {61 display: flex;62 width: 100%;63 max-width: 1600px;64 margin: auto;65 }66 nav .gnb li {67 flex: 1 1 200px;68 }69 nav .gnb li a {70 color: #fff;71 display: inline-block;72 padding: 0.2rem;73 text-align: center;74 line-height: 2rem;75 height: 2rem;76 position: relative;77 }78 nav .gnb li a:before,79 nav .gnb li a:after {80 position: absolute;81 content: '';82 left: 0;83 width: 100%;84 height: 2px;85 background: #000;86 transform: scaleX(0);87 transition: all 0.5s;88 }89 nav .gnb li a:before {90 top: 0;91 transform-origin: left;92 }93 .gnb li a:after {94 bottom: 0;95 transform-origin: right;96 }97 nav .gnb li.on a:before,98 nav .gnb li a:hover:before,99 nav .gnb li.on a:after,100 nav .gnb li a:hover:after {101 transform: scaleX(1);102 }103 .container {104 }105 section {106 min-height: 100vh;107 line-height: 100vh;108 text-align: center;109 background-color: yellow;110 margin: 40vw auto;111 }112 section::selection {113 color: red;114 background-color: #00eeff;115 }116
117 /* sideNav */118 .sideNav {119 position: fixed;120 top: 10%;121 right: 10%;122 z-index: 999;123 }124 .sideNav a {125 display: inline-block;126 padding: 1em;127 background: rgba(0, 0, 0, 0.5);128 color: #fff;129 margin-bottom: 1em;130 }131 .sideNav li.on a::before {132 content: '😺';133 }134
135 /* sectionIn */136 section {137 position: relative;138 }139 section .ball {140 position: absolute;141 background-color: skyblue;142 width: 450px;143 height: 450px;144 border-radius: 50%;145 left: -450px;146 transition: left 1s;147 }148 section.on .ball {149 left: 100px;150 }1 let win = $(window),2 sections = $('.section'),3 gnb = $('.gnb li'),4 sideNav = $('.sideNav>li');5
6 const gnbOff = () => {7 gnb.each(() => {8 this.removeClass('on');9 });10 };11
12 gnb.click(function (e) {13 e.preventDefault();14 let tg = $(this);15 let index = tg.index();16 let section = sections.eq(index);17 let offset = section.offset().top;18 $('html,body').stop().animate({ scrollTop: offset }, 1000, 'easeOutCirc');19 });20 sideNav.click(function (e) {21 e.preventDefault();22 let tg = $(this);23 let index = tg.index();24 let section = sections.eq(index);25 let offset = section.offset().top;26 $('html,body').stop().animate({ scrollTop: offset }, 1000, 'easeOutCirc');27 });28
29 win.scroll(function () {30 let sct = win.scrollTop();31 sections.each(function (i) {32 if (sct >= sections.eq(i).offset().top - 300) {33 $('.gnb li').eq(i).addClass('on').siblings().removeClass('on');34 sideNav.eq(i).addClass('on').siblings().removeClass('on');35 sections.eq(i).addClass('on').siblings().removeClass('on');36 }37 });38 sct > 400 ? $('nav').addClass('sticky') : $('nav').removeClass('sticky');39 });1let win = window,2 winSct,3 sections = document.querySelectorAll('.section'),4 gnb = document.querySelectorAll('.gnb li'),5 sideNav = document.querySelectorAll('.sideNav>li');6
7const gnbOff = () => {8 gnb.forEach((o) => {9 o.classList.remove('on');10 });11};12const navOff = () => {13 sideNav.forEach((o) => {14 o.classList.remove('on');15 });16};17
18gnb.forEach((el) => {19 el.addEventListener('click', function (e) {20 e.preventDefault();21 document.querySelector(el.firstChild.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });22 gnbOff();23 el.classList.add('on');24 });25});26sideNav.forEach((el) => {27 el.addEventListener('click', function (e) {28 e.preventDefault();29 document.querySelector(el.firstChild.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });30 navOff();31 el.classList.add('on');32 });33});34
35win.addEventListener('scroll', function (e) {36 e.preventDefault();37 winSct = this.scrollY;38 winSct >= 400 ? document.querySelector('nav').classList.add('sticky') : document.querySelector('nav').classList.remove('sticky');39 scrollOn(winSct);40});41
42const scrollOn = (sct) => {43 if (sct >= sections[0].offsetTop - 300) {44 gnbOff();45 navOff();46 document.querySelector('.gnb li:nth-child(1)').classList.add('on');47 document.querySelector('.sideNav li:nth-child(1)').classList.add('on');48 sections[0].classList.add('on');49 }50 if (sct >= sections[1].offsetTop - 300) {51 gnbOff();52 navOff();53 document.querySelector('.gnb li:nth-child(2)').classList.add('on');54 document.querySelector('.sideNav li:nth-child(2)').classList.add('on');55 sections[1].classList.add('on');56 }57 if (sct >= sections[2].offsetTop - 700) {58 gnbOff();59 navOff();60 document.querySelector('.gnb li:nth-child(3)').classList.add('on');61 document.querySelector('.sideNav li:nth-child(3)').classList.add('on');62 sections[2].classList.add('on');63 }64 if (sct >= sections[3].offsetTop - 300) {65 gnbOff();66 navOff();67 document.querySelector('.gnb li:nth-child(4)').classList.add('on');68 document.querySelector('.sideNav li:nth-child(4)').classList.add('on');69 }70 if (sct >= sections[4].offsetTop - 300) {71 gnbOff();72 navOff();73 document.querySelector('.gnb li:nth-child(5)').classList.add('on');74 document.querySelector('.sideNav li:nth-child(5)').classList.add('on');75 }76 if (sct >= sections[5].offsetTop - 300) {77 gnbOff();78 navOff();79 document.querySelector('.gnb li:nth-child(6)').classList.add('on');80 document.querySelector('.sideNav li:nth-child(6)').classList.add('on');81 }82 if (sct >= sections[6].offsetTop - 300) {83 gnbOff();84 navOff();85 document.querySelector('.gnb li:nth-child(7)').classList.add('on');86 document.querySelector('.sideNav li:nth-child(7)').classList.add('on');87 }88 if (sct >= sections[7].offsetTop - 300) {89 gnbOff();90 navOff();91 document.querySelector('.gnb li:nth-child(8)').classList.add('on');92 document.querySelector('.sideNav li:nth-child(8)').classList.add('on');93 }94 if (sct >= sections[8].offsetTop - 300) {95 gnbOff();96 navOff();97 document.querySelector('.gnb li:nth-child(9)').classList.add('on');98 document.querySelector('.sideNav li:nth-child(2)').classList.add('on');99 }100};