https://aosceno.tistory.com/519
twitter app header처럼 vanilla JS로 스크롤에 따라 내려오고 올라가는 헤더 만들기
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 twitter App Header 구현하기 This is Header NAV hello world! hello world!..
aosceno.tistory.com
훨씬 더 간단하게 리팩토링?? 해봄
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>twiiterHead(BETTER)</title>
<link href="./twiiterHead.css" rel="stylesheet" type="text/css"/>
<script src="./twiiterHead.js" defer></script>
</head>
<body>
<div id="myDiv">...</div>
<div id="wrap">
<nav id="myNav">nav</nav>
<header id="myHead">header</header>
</div>
</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
|
@charset "utf-8";
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
width:100%;
height:1000vh;
min-height:100vh;}
#myDiv{
position:fixed;
top:50%;left:50%;
min-width:30%;
transform:translate(-50%,-50%);
padding:1em 2em;
background:#eee;
line-height:2em;
text-align:left;
}
/* */
#wrap{
position:fixed;
left:0;
width:100%;
text-align:center;}
#myNav,#myHead{
display:flex;
flex-direction:column;
justify-content:center;align-items:center;}
#myNav{
position:relative; z-index:100;
height:50px;
background:coral;
font-size:1vw;}
#myHead{
position:relative;
height:200px;
background:indianred;
font-size:5vw;}
|
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
const myDiv = document.getElementById('myDiv');
const wrap = document.getElementById('wrap');
const HEI_wrap = wrap.offsetHeight * -1;
const myNav = document.getElementById('myNav');
const HEI_nav = myNav.offsetHeight * -1;
const myHead = document.getElementById('myHead');
const HEI_head = myHead.offsetHeight * -1;
let sc = {
prev : 0,
now : 0,
status : '',
};
let move = {
wrap : 0,
nav : 0,
head : 0,
head_sec : 0,
};
window.addEventListener('scroll',()=>{
sc.now = window.scrollY;
if(sc.prev < sc.now){
sc.status = "DOWN"
move.nav -= 5;
move.head -= 10;
move_nav();
move_head();
}else{
sc.status = "UP"
move.nav += 10;
move_nav();
}
showInfo(sc.status);
sc.prev = sc.now;
});//scroll
/* ---------------- */
function showInfo(status){
myDiv.innerHTML = `
<strong>${status}</strong>
<p><strong>scrollY</strong>___prev : ${parseInt(sc.prev)} / next : ${parseInt(sc.now)}</p>
`;
}//showInfo
/* ---------------- */
function move_nav(){
if(move.nav <= HEI_nav){
move.nav = HEI_nav;
move.head_sec = 0;}
if(move.nav >= 0){
move.nav = 0;
move.head_sec += 10;
if(move.head_sec >= -(HEI_nav / 2)){
move.head += 10;
move_head();
}
}
myNav.style.transform = `translateY(${move.nav}px)`;
}//move_nav()
function move_head(){
if(move.head <= HEI_wrap){move.head = HEI_wrap;}
if(move.head >= 0){move.head = 0;}
myHead.style.transform = `translateY(${move.head}px)`;
}//move_head
|
cs |
'CSS&JS > ⚡Thinkers' 카테고리의 다른 글
| (vanilla JS) 체크박스 전체 선택 / 전체 해제 (3) (0) | 2021.06.30 |
|---|---|
| vanilla JS Slider 1.2 (바닐라 자바스크립트 슬라이드 1.2) (0) | 2021.06.18 |
| marquee 텍스트 효과 CSS로 구현하기 (0) | 2021.05.07 |
| custom Select - 이벤트 위임으로 좀 더 깔끔하게 (0) | 2021.04.30 |
| fixed thead(스크롤 할 때 부모 엘리먼트에 fix되는 thead를 만들고싶다면) (0) | 2021.04.14 |