728x90
반응형
html 마크업
css 편집_contents
css 편집_nav
●.each: 선택한 요소가 여러개일 때 반복적으로 함수를 실행해주는 메서드
header 높이값
if문을 이용하여 nav 액션주기
처음에는 nav가 밑에 있고 스크롤을 내리면 nav가 위로 올라가는 액션이다.
this 는 nav 이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>패럴럭스_4</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<nav id="nav">
<h1>JHH's Website</h1>
<ul class="menu">
<li class="active"><a href="#article1">menu1</a></li>
<li><a href="#article2">menu2</a></li>
<li><a href="#article3">menu3</a></li>
<li><a href="#article4">menu4</a></li>
<li><a href="#article5">menu5</a></li>
<li><a href="#article6">menu6</a></li>
</ul>
</nav>
<section id="contents">
<article id="article1"><h2>열심히 합시다.</h2></article>
<article id="article2"><h2>졸지 마시고 자십시오</h2></article>
<article id="article3"><h2>무슨 일 이든 안되면 반복하세요</h2></article>
<article id="article4"><h2>오늘 비가 너무 많이 오네요</h2></article>
<article id="article5"><h2>평양냉면 먹고싶다.</h2></article>
<article id="article6"><h2>돈 많은 백수가 됐으면 좋겠다.</h2></article>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
// 2페이지 네비를 위에 fixed
$("#nav").each(function(){
let header = $(this);
let headerOffset = header.offset().top;
// console.log(headerOffset);
// .each: 선택한 요소가 여러개일 때 반복적으로 함수를 실행해주는 메서드
$(window).scroll(function(){
let wScroll = $(this).scrollTop();
console.log(wScroll);
if(wScroll > headerOffset){
header.addClass("on");
}
else{
header.removeClass("on");
}
});
});
// 변수 지정
const nav = $("#nav ul li");
const cont = $("#contents > article")
// 클릭이벤트
nav.click(function(e){
e.preventDefault();
let target = $(this);
let index = target.index();
let section = cont.eq(index);
let offset = section.offset().top;
$("html,body").animate({scrollTop:offset},600);
});
</script>
</body>
</html>@charset "utf-8";
*{
padding: 0;
margin: 0;
box-sizing: border-box;
color: #222;
}
li{
list-style: none;
}
a{
color: #222;
text-decoration: none;
}
/* nav */
#nav{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
background-color: rgba(255,255,255,0.5);
z-index: 100;
}
/* nav에 on이라는 성질을 가졌을 때 */
#nav.on{
position: fixed;
top: 0;
}
#nav h1{
float: left;
padding-left: 20px;
line-height: 60px;
font-size: 40px;
}
#nav .menu{
float: right;
padding: 10px;
}
#nav .menu li{
display: inline;
}
#nav .menu li a{
display: inline-block;
padding: 20px 15px;
text-transform: uppercase;
color: #fff;
font-weight: bold;
}
#nav .menu li.active{}
/*contents */
#contents{
text-align: center;
}
#contents > article{
width: 100%;
height: 100vh;
line-height: 100vh;
}
#contents > article > h2{
font-size: 80px;
font-weight: bold;
}
#article1{background-color: darkslateblue;}
#article2{background-color: darkturquoise;}
#article3{background-color: darkcyan;}
#article4{background-color: darkkhaki;}
#article5{background-color: darkorange;}
#article6{background-color: darkorchid;}728x90
반응형
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| 비주얼 스튜디오 코드 57 _ parallax 05 (0) | 2023.06.30 |
|---|---|
| 비주얼 스튜디오 코드 56_ 반응형 메뉴(모바일 네비게이션) (0) | 2023.06.30 |
| [JAVASCRIPT]5.클래스 제어하기 (0) | 2023.06.29 |
| 비주얼 스튜디오 코드 54_자식 요소의 순서를 지정하자 (0) | 2023.06.29 |
| 비주얼 스튜디오 코드 53_parallax03 (2) | 2023.06.28 |