Document

## 1. 메뉴활성화 ### 1.1. 단계1-상단메뉴 #### 1.1.1. 스티키 [미리보기](https://qwerewqwerew.github.io/source/jq/9) ```html Document

section1
section2
section3
section4
section5
section6
section7
section8
section9

section1

section2

ball

section3

section4

section5

section6

section7

section8

section9

``` [reset다운로드](https://meyerweb.com/eric/tools/css/reset/) ```css @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; } ``` ```js 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'); }); ``` ```js 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'); } }; ```

07_activeMenu

구문

1. 메뉴활성화

1.1. 단계1-상단메뉴

1.1.1. 스티키

07_activeMenu

구문

1. 메뉴활성화

1.1. 단계1-상단메뉴

1.1.1. 스티키