속성 작성값은 계속 쓰이니까 알아두자...
<body>
<div id="wrap">
<header id="header">
<div class="logo">
<a href="#">logo</a>
</div>
<nav class="nav">
<ul class="gnb">
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
</ul>
</nav>
</header>
<div id="visual"></div>
</div>
</body>
구조
<style>
*{
margin: 0; padding: 0;
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
#header{
height: 100px;
position: fixed;
left: 0; top: 0;
width: 100%;
color: #fff;
}
#header.active{
background: rgba(0,0,0,0.4);
position: fixed;
}
body{
height: 3000px;
}
.in{
width: 1400px;
margin: 0 auto;
}
.header-in{
height: 100%;
display: flex;
align-items: center;
}
.nav{
margin-left: 100px;
width: 800px;
}
.gnb{
display: flex;
justify-content: space-around;
}
.gnb li{
width: calc(100%/4 - 5px);
text-align: center;
}
.gnb li a{
display: block;
line-height: 100px;
}
#visual{
height: 800px;
background: url(./images/visual.jpg) no-repeat center top / cover;
}
</style>
css
상단에 메뉴를 두되 비주얼과 겹치도록 하고 아래로 내려가면 글자가 보이지 않게 되어서 백그라운드를 넣어주고 싶다. 이때 스크롤의 위치에 맞게 백그라운드가 생성되도록 할것이다. 스크롤 값을 알아보기 위해서 scrolY를 넣어서 값을 알아보고
<script>
let header=document.querySelector("#header");
window.addEventListener("scroll", function(){
let scr=window.scrollY;
// console.log(scr)
if(scr>=100){
header.classList.add("active");
}else{
header.classList.remove("active");
}
})
</script>
확인하지 않고 자바가 자동으로 높이값을 계산하도록 할것
overheight 를 사용하여서 알게 할수 있다. 새로운 변수를 선언하여서 계산식을 만들어준다.
상대좌표값 - getBoundingClientRect()
<script>
let tit=document.querySelector(".tit");
//상대좌표값 -객체.getBoungingClientRect().top 자바스크립트를 통해서 크기정보를 확인하는 메서드 (top을 썼기 때문에 높이를 확인하고자 하는것 넓이는 width) 카페의 넓이높이 참고
let el=tit.getBoundingClientRect().top;
console.log(el);
</script>
getBoundingClientRect()는 넓이 값을 알아보는 메서드로 스크롤의 위치 좌표값을 알아내어서 자바를 진행하도록 한다.
기준을 브라우저의 최상단이고 스크롤을 이동하면 수가 변하게 되는 상단의 기준을 두고 아래로 내려왔기 때문에 값이 달라지게 되고 더 내려가면 값이 -가 된다.
상대좌표값 - offsetTop
<script>
let tit=document.querySelector(".tit");
//상대좌표값 -객체.iffsettop, 객체.offsetleft - 부모를 기준으로 좌표값이 지정
let el=tit.offsetTop;
console.log(el);
</script>
부모를 기준으로 좌표값이 지정되어서 스크롤을 내려도 높이 값으로 지정한 1000px과 패딩 값으로 지정한 100px이 합해서 계속해서 높이 값이 1100으로 측정되는 것이다.
.sec:nth-child(1){background: thistle;}
.sec:nth-child(2){
background: turquoise;
position: relative;
}
여기서 부모를 2번째 섹션에다가 주었다 (포지션활용)
부모로 지정한 곳의 크기만 잡게 되고 해당 섹션의 높이를 100으로 주었었기 때문에 어디를 스크롤 하여도 100으로 잡히게 된다.
절대좌표값
<body>
<div id="wrap">
<header id="header">
<div class="in header-in">
<div class="logo">
<a href="#">logo</a>
</div>
<nav class="nav">
<ul class="gnb"><!--nav.nav>ul.gnb>li*4>a[href="#"]>{menu$}-->
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</nav>
</div>
</header>
<div id="visual"></div>
<main id="container">
<section class="sec1"></section>
<section class="sec2"></section>
<section class="sec3" style="background: pink;"></section>
<!--마지막 컨텐츠를 기준으로 포지션을 잡을것 마지막 섹션에 왔을때 top이 보이도록 할것이기 때문-->
</main>
<footer id="footer"></footer>
<div id="top">TOP</div>
</div>
구조
<style>
*{margin: 0; padding: 0; box-sizing: border-box;}
ul{list-style: none;}
a{text-decoration: none; color: inherit;}
#header{
height: 100px;
position: absolute;
left: 0; top: 0;
width: 100%;
color: #fff;
}
.in{
width: 1000px;
margin: 0 auto;
}
.header-in{
height: 100%;
display: flex;
align-items: center;
}
.nav{
margin-left: 100px;
width: 800px;
}
.gnb{
display: flex;
justify-content: space-around;
}
.gnb li{
width: calc(100%/4 - 5px);
text-align: center;
}
.gnb li a{
display: block;
line-height: 100px;
}
#visual{
height: 800px;
background:url(./images/visual.jpg) no-repeat center top / cover;
}
/* java */
#header.active{
background: rgba(0, 0, 0, .4);
position: fixed;
}
#top{
width: 70px;
height: 70px;
background: darkslateblue;
color: #fff;
text-align: center;
line-height: 100px;
cursor: pointer;
position: fixed;
right: 50px;
bottom: 100px;
display: none;
}
#top.active{
display: block;
}
#container>section{
height: 1000px;
background: #eaeaea;
}
#footer{
height: 200px;
background: #333;
}
</style>
css
<script>
let header=document.querySelector("#header");
let headerTop=header.offsetHeight;
// console.log(headerTop)
let btnTop=document.querySelector("#top");
let sec3Top=document.querySelector(".sec3")
// 상단 고정 네비게이션
window.addEventListener("scroll",function(){
let scr=window.scrollY;
let sec3Top=document.querySelector(".sec3").getBoundingClientRect().top;
let abs=scr+sec3Top;
// console.log(scr);
if(scr>=100){
header.classList.add("active");
}
else{
header.classList.remove("active");
}
// top버튼 1단계
// if(scr>1900){
// btnTop.classList.add("active");
// }
// else{
// btnTop.classList.remove("active");
// }
//top버튼 2단계
if(scr>abs){
btnTop.classList.add("active");
}else{
btnTop.classList.remove("active");
}
})
btnTop.addEventListener("click", function(){
window.scrollTo({top:0, behavior:"smooth"});
})
</script>
top 버튼을 누르면 부드럽게 위로 올라가도록 하는 자바
'기록 > 수업정리_javascr' 카테고리의 다른 글
| 연산자(증감, 논리) (0) | 2024.08.01 |
|---|---|
| scrollTo() (0) | 2024.07.31 |
| javascript_4_함수 (0) | 2024.07.18 |
| javascript_3 (0) | 2024.07.17 |
| Javascript_2 (0) | 2024.07.16 |
