HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>twitter App Header 구현하기</title>
<link rel="shortcut icon" href="#"/>
<link href="./twitterApp.css" rel="stylesheet" type="text/css"/>
<script src="./twitterApp_3.js" defer></script>
</head>
<body>
<!-- https://codepen.io/lehollandaisvolant/pen/ryrrGx -->
<!-- https://zellwk.com/blog/css-translate-values-in-javascript/ -->
<header>
<nav class="cHeader" id="myNav_1">This is Header</nav>
<nav class="cHeader" id="myNav_2">NAV</nav>
</header>
<section class="sect">hello world!</section>
<section class="sect">hello world!</section>
<section class="sect">hello world!</section>
<section class="sect">hello world!</section>
<section class="sect">hello world!</section>
<section class="sect">hello world!</section>
</body>
</html>
|
cs |
CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
@charset "utf-8";
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
overflow-x:hidden;
width:100%;min-height:100vh;}
/* */
header{
position:fixed; z-index:50;
top:0;
transform:translateY(0);
width:100%;}
.cHeader{
position:relative;
width:100%;
border-bottom:1px solid #000;
box-shadow:0 5px 10px rgba(0,0,0,.5);
text-align:center;}
#myNav_1{
z-index:100;
transform:translateY(0);
height:120px;line-height:120px;
background:#ccc;
font-weight:bold;font-size:2rem;}
#myNav_2{
z-index:80;
transform:translateY(0);
background:rgba(255,250,255.5);
backdrop-filter:blur(5px);
height:80px;line-height:80px;}
/* */
.sect{
position:relative;
width:100%;height:100vh;
line-height:100vh;
background:rgb(192, 167, 157);
border:3px solid #d2d2d2;
text-align:center;}
.sect:nth-child(even){background:salmon;}
section:first-of-type{margin-top:200px;}
|
cs |
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | let scrollPos = 0; let gbcrTop; let myNav_1 = document.getElementById('myNav_1'); let myNav_2 = document.getElementById('myNav_2'); let matrix_1 = window.getComputedStyle(myNav_1).transform; let matrix_2 = window.getComputedStyle(myNav_2).transform; // console.log(matrix_1,matrix_2); let nowTop_1; let i= 0; let j = 0; window.addEventListener('scroll',function(){ gbcrTop = document.body.getBoundingClientRect().top; matrix_1 = window.getComputedStyle(myNav_1).transform; matrix_2 = window.getComputedStyle(myNav_2).transform; m1_v = matrix_1.match(/matrix.*\((.+)\)/)[1].split(', ')[5]; m2_v = matrix_2.match(/matrix.*\((.+)\)/)[1].split(', ')[5]; if(scrollPos > gbcrTop){ //console.log('down'); i -= 8; j -= 8; if(m1_v < -200){ m1_v = -200; i = -200; j = -200; }else{ myNav_1.style.transform = `translateY(${i}px)`; myNav_2.style.transform = `translateY(${j}px)`; } }else{ //console.log('up'); i += 10; if(m1_v < 0){ myNav_1.style.transform = `translateY(${i}px)`; }else if(m1_v >= 0 && m2_v < 0){ i=0; j+=10; myNav_1.style.transform = `translateY(0px)`; myNav_2.style.transform = `translateY(${j}px)`; }else{ i = 0; j = 0; } }//if else scrollPos = gbcrTop; if(window.pageYOffset == 0){ myNav_1.style.transform = `translateY(0px)`; myNav_2.style.transform = `translateY(0px)`; } }); //scroll | cs |
소스코드
'CSS&JS > ⚡Thinkers' 카테고리의 다른 글
| custom Select - 이벤트 위임으로 좀 더 깔끔하게 (0) | 2021.04.30 |
|---|---|
| fixed thead(스크롤 할 때 부모 엘리먼트에 fix되는 thead를 만들고싶다면) (0) | 2021.04.14 |
| <canvas>로 피자 조각(파이) 그리기 - 삼각함수 사용 (0) | 2021.04.03 |
| <canvas> sin, cos로 각도와 대각선 길이만 가지고 x,y좌표 찍기 (0) | 2021.04.02 |
| 커스텀 셀렉트 박스 만들기 - HTML DOM에는 select만 작성하고 vaniila JS로 알아서 DIV 생성 (4) | 2021.03.19 |