JS30 day24 - Sticky Nav
作業內容
今天的作業相較之下簡單多了，但還滿實用的！就是頁面往下滑動，碰到導覽列之後導覽列會繼續往下滑動不會消失
可以參考這份CodePen的效果
一開始是這樣：
往下滑會變成這樣：
學到什麼
-
CSS
- 一般直覺上會想要在產生效果的時候，如果要做的是固定 navbar，會直接在 navbar 上面加上 class，但他比較特別的是把 body 本身加上
fixed-nav 的 class，這樣一來其他要產生效果的地方，比方說 logo 跟 文章本體就不用在另外加上 class 是個比較好的做法
1
2
3
4
5
6
7
8
9
10
| .fixed-nav nav{
position: fixed;
box-shadow: 0 5px rgba(0,0,0,0.1)
}
.fixed-nav li.logo{
max-width: 500px;
}
.fixed-nav .site-wrap{
transform: scale(1);
}
|
-
JS
- 這次在 JS 上面的程式碼倒是很簡單，主要在於細節的部分，像是在 nav 變成 fixed 的當下，文章會往上跳，因為 fixed 物件是不佔空間的，文章會往上跳 nav 的高度的空間，所以我們必須當下把他加回來
1
2
3
4
5
6
7
8
9
| function fixNav(){
if (window.scrollY >= topOfNav){
document.body.classList.add('fixed-nav')
document.body.style.paddingTop = `${nav.offsetHeight}px`
}else{
document.body.classList.remove('fixed-nav')
document.body.style.paddingTop = 0
}
}
|
參考資料：
https://github.com/wesbos/JavaScript30
code 內容：
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <header>
<h1>A story about getting lost.</h1>
</header>
<nav id="main">
<ul>
<li class="logo"><a href="#">LOST.</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Maps</a></li>
</ul>
</nav>
<div class="site-wrap">
<p> ... </p>
</div>
|
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
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
| html {
box-sizing: border-box;
background: #eeeeee;
font-family: 'helvetica neue';
font-size: 20px;
font-weight: 200;
}
body {
margin: 0;
}
*, *:before, *:after {
box-sizing: inherit;
}
.site-wrap {
max-width: 700px;
margin: 70px auto;
background: white;
padding: 40px;
text-align: justify;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
transform: scale(0.98);
transition: transform 0.5s;
}
.fixed-nav .site-wrap{
transform: scale(1);
}
header {
text-align: center;
height: 50vh;
background: url(http://wes.io/iEgP/wow-so-deep.jpg) bottom center no-repeat;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
color: white;
font-size: 7vw;
text-shadow: 3px 4px 0 rgba(0,0,0,0.2);
}
nav {
background: black;
top: 0;
width: 100%;
transition: all 0.5s;
position: relative;
z-index: 1;
}
.fixed-nav nav{
position: fixed;
box-shadow: 0 5px rgba(0,0,0,0.1)
}
nav ul {
margin: 0;
padding:0;
list-style: none;
display: flex;
}
nav li {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
li.logo {
max-width: 0;
overflow: hidden;
background: white;
transition: all .5s;
font-weight: 600;
font-size: 30px;
}
.fixed-nav li.logo{
max-width: 500px;
}
li.logo a {
color: black;
}
nav a {
text-decoration: none;
padding: 20px;
display: inline-block;
color: white;
transition: all 0.2s;
text-transform: uppercase;
}
|
JS:
1
2
3
4
5
6
7
8
9
10
11
12
13
| const nav = document.querySelector('#main')
const topOfNav = nav.offsetTop
function fixNav(){
if (window.scrollY >= topOfNav){
document.body.classList.add('fixed-nav')
document.body.style.paddingTop = `${nav.offsetHeight}px`
}else{
document.body.classList.remove('fixed-nav')
document.body.style.paddingTop = 0
}
}
window.addEventListener('scroll', fixNav)
|
