728x90
반응형
스크롤 시 네비게이션 보이기
html 마크업
css reset
css 편집
#nav
nav position: absolute 띄워주기
nav를 숨겨놨다가 on을 만나면 나오게 되고 고정해줌
#contents
<script> 이벤트 적용
menu를 누르면 해당 페이지로 넘어간다.
#nav를 숨겨주기
window 스크롤 됐을 때 nav와 on이 만나서 이벤트가 발생해야함
스크롤을 내리면 nav가 나타난다.
menu 클릭하면 해당 페이지로 감
<html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스크롤 시 네비게이션 보이기</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="nav">
<h1 class="logo">크리스탈</h1>
<ul class="menu">
<li class="active"><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><a href="#">menu5</a></li>
<li><a href="#">menu6</a></li>
</ul>
</div>
<div id="contents">
<div id="div1"><h2>오늘 비가 많이 와요.</h2></div>
<div id="div2"><h2>하교 때만 안오면 좋겠어요.</h2></div>
<div id="div3"><h2>바람도 많이 분다고 합니다.</h2></div>
<div id="div4"><h2>모두 모두 건강 조심합시다.</h2></div>
<div id="div5"><h2>오늘 점심은??</h2></div>
<div id="div6"><h2>비오는 날은 해물파전</h2></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
const nav = $("#nav > .menu > li");
const cont = $("#contents > div");
nav.click(function(e){
e.preventDefault();
let target = $(this);
let index = target.index();
let section = cont.eq(index);
let offset = section.offset().top
$("html").animate({scrollTop:offset},600);
});
$(window).scroll(function(){
let wScroll = $(this).scrollTop();
console.log(wScroll)
if(wScroll > 200){
// cont.eq(1).offset().top : 두번째 페이지부터 보이기
$("#nav").addClass("on");
}else if(wScroll == 0){
$("#nav").removeClass("on");
}
if(wScroll >= cont.eq(1).offset().stop){
nav.removeClass("active");
nav.eq(1).addClass("active");
}
if(wScroll >= cont.eq(2).offset().stop){
nav.removeClass("active");
nav.eq(2).addClass("active");
}
if(wScroll >= cont.eq(3).offset().stop){
nav.removeClass("active");
nav.eq(3).addClass("active");
}
if(wScroll >= cont.eq(4).offset().stop){
nav.removeClass("active");
nav.eq(4).addClass("active");
}
if(wScroll >= cont.eq(5).offset().stop){
nav.removeClass("active");
nav.eq(5).addClass("active");
}
if(wScroll >= cont.eq(6).offset().stop){
nav.removeClass("active");
nav.eq(6).addClass("active");
}
});
</script>
</body>
</html><css>
@charset "utf-8";
*{
margin: 0;
padding: 0;
/* margin, padding 사이즈 반영이 안되서 높이, 너비값으로 직접 적용 */
box-sizing: border-box;
color: #222;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.clearfix::before, .clearfix::after{
display: block;
content: "";
clear: both;
}
#nav{
position: absolute;
left: 0;
top: -61px;
width: 100%;
background-color: rgba(255, 255, 255, 0.3);
height: 60px;
}
#nav.on{
/* nav를 위로 숨겨 놨다가 on을 만나면 고정시킴 */
position: fixed;
top: 0;
}
#nav .logo{
float: left;
width: 200px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
text-shadow: 2px 2px 2px #999;
}
#nav .menu{
float: right;
margin-right: 20px;
}
#nav .menu li{
/* menu 한줄로 나열하기 */
display: inline;
}
#nav .menu li a{
display: inline-block;
padding: 20px 15px;
font-weight: bold;
color: cornflowerblue;
text-transform: capitalize;
}
#nav .menu li.active{}
#nav .menu li.active a{
color: rgb(54, 41, 152);
}
#contents{
text-align: center;
}
#contents > div{
height: 100vh;
width: 100%;
line-height: 100vh;
}
#contents > div >h2{
color: #fff;
font-size: 6vw;
/* 글자 한페이지 넘어가지 않게하기 */
white-space: nowrap;
letter-spacing: -3px;
text-shadow: 2px 2px 3px #000;
}
#div1{background-color: lightblue;}
#div2{background-color: lightcoral;}
#div3{background-color: lightcyan;}
#div4{background-color: lightgreen;}
#div5{background-color: lightsalmon;}
#div6{background-color: lightseagreen;}728x90
반응형
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| 비주얼 스튜디오 코드 62_ 하이시네마 웹사이트 만들기 02 (0) | 2023.07.04 |
|---|---|
| 비주얼 스튜디오 코드 61 _ 비교연산자 (0) | 2023.07.04 |
| 비주얼 스튜디오 코드 59_하이시네마 웹페이지 만들기 (0) | 2023.07.03 |
| 비주얼 스튜디오 코드 58_햄버거 메뉴 복습 (0) | 2023.07.03 |
| 비주얼 스튜디오 코드 57 _ parallax 05 (0) | 2023.06.30 |