-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathslideDownBar.html
86 lines (82 loc) · 2.96 KB
/
slideDownBar.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
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
<!-- Slide Down a Bar -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide Down Bar</title>
<style>
*{
margin: 0;padding: 0;
font-family: poppins;
}
#navbar{
background-color: #333;
position: fixed;
top: -50px;
width: 100%;
transition: top 0.3s;
padding: 0px 5px 0px 0px;
}
#navbar a{
color: white;
text-decoration: none;
font-size: 17px;
padding: 15px;
float: left;
display: block;
text-align: center;
}
#navbar a:hover{
background-color: #ddd;
color: black;
}
h2{
font-size: 4rem;
border-bottom: 1px solid crimson;
}
p{
font-size: 1.4rem;
margin: 20px 0px;
line-height: 2rem;
}
.content{
height: 100vh;
padding: 10rem 8rem;
text-align: center;
background-color: #ddd;
}
</style>
</head>
<body>
<div id="navbar">
<a href="#">Home</a>
<a href="#">News</a>
<a href="#">About</a>
</div>
<div class="content">
<h2>Home</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias ullam hic similique, nesciunt, sed quaerat eos inventore sequi cum voluptate accusamus aperiam atque, eius maxime? Vitae tempore praesentium porro ad iusto saepe, ab dignissimos eum quos magnam recusandae nostrum consectetur.</p>
</div><hr>
<div class="content">
<h2>News</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias ullam hic similique, nesciunt, sed quaerat eos inventore sequi cum voluptate accusamus aperiam atque, eius maxime? Vitae tempore praesentium porro ad iusto saepe, ab dignissimos eum quos magnam recusandae nostrum consectetur.</p>
</div><hr>
<div class="content">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias ullam hic similique, nesciunt, sed quaerat eos inventore sequi cum voluptate accusamus aperiam atque, eius maxime? Vitae tempore praesentium porro ad iusto saepe, ab dignissimos eum quos magnam recusandae nostrum consectetur.</p>
</div><hr>
<script>
window.onscroll= function() {scrollFunction()};
function scrollFunction(){
if(document.body.scrollTop>20 || document.documentElement.scrollTop>20){
document.getElementById("navbar").style.top="0";
}
else{
document.getElementById("navbar").style.top="-50px";
}
}
</script>
</body>
</html>