This time I will share jQuery Plugin and tutorial about Animated Sticky Navbar With jQuery And CSS3, hope it will help you in programming stack.
| File Size: | 2.97 KB |
|---|---|
| Views Total: | 1766 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A modern site navigation that collapses a fullscreen hero header into a sticky navigation bar on scroll bar.
Built with JavaScript (jQuery) and CSS/CSS3. Ideal for landing pages or single page web applications.
See It In Action:
How to use it:
1. Add the sticky navigation bar into your hero header as follows:
01 |
<header> |
02 |
<img src="bg.jpg" class="banner"> |
03 |
<a href="#" class="logo"> |
04 |
<img src="logo.png"/> |
05 |
</a> |
06 |
<nav> |
07 |
<ul> |
08 |
<li> <a href="#" class="active">Home</a> </li> |
09 |
<li> <a href="#">About</a> </li> |
10 |
<li> <a href="#">Services</a> </li> |
11 |
<li> <a href="#">Portifolio</a> </li> |
12 |
<li> <a href="#">Team</a> </li> |
13 |
<li> <a href="#">Contact Us</a> </li> |
14 |
</ul> |
15 |
</nav> |
16 |
</header> |
2. The CSS styles for the hero header.
01 |
header{ |
02 |
position: fixed; |
03 |
top: 0; |
04 |
left: 0; |
05 |
height: 100vh; |
06 |
width: 100%; |
07 |
background: #000; |
08 |
transition: 1s; |
09 |
padding: 0 100px; |
10 |
box-sizing: border-box; |
11 |
} |
12 |
13 |
header.scrolled{ |
14 |
height: 100px; |
15 |
} |
16 |
17 |
header img.banner{ |
18 |
object-fit: cover; |
19 |
position: absolute; |
20 |
top: 0; |
21 |
left: 0; |
22 |
height: 100%; |
23 |
width: 100%; |
24 |
transition: 1s; |
25 |
} |
26 |
27 |
header.scrolled img.banner{ |
28 |
opacity: 0; |
29 |
} |
30 |
31 |
header .logo{ |
32 |
position: absolute; |
33 |
top: calc(50% - 150px); |
34 |
left: calc(50% - 150px); |
35 |
transition: 1s; |
36 |
} |
37 |
38 |
header.scrolled .logo{ |
39 |
position: relative; |
40 |
top: 10px; |
41 |
left: 0; |
42 |
43 |
} |
44 |
45 |
header .logo img { |
46 |
width: 300px; |
47 |
transition: 1s; |
48 |
} |
49 |
50 |
header.scrolled .logo img { |
51 |
width: 80px; |
52 |
} |
3. The CSS styles for sticky header navbar.
01 |
nav{ |
02 |
position: relative; |
03 |
float: right; |
04 |
} |
05 |
06 |
nav ul{ |
07 |
margin: 0; |
08 |
padding: 40px 0; |
09 |
display: flex; |
10 |
transition: 1s; |
11 |
opacity: 0; |
12 |
visibility: hidden; |
13 |
transform: translateX(100px); |
14 |
} |
15 |
16 |
header.scrolled nav ul{ |
17 |
opacity: 1; |
18 |
visibility: visible; |
19 |
transform: translateX(0); |
20 |
} |
21 |
22 |
nav ul li{ |
23 |
list-style: none; |
24 |
} |
25 |
26 |
nav ul li a { |
27 |
color: #fff; |
28 |
padding: 10px 15px; |
29 |
text-decoration: none; |
30 |
transition: 1s; |
31 |
} |
32 |
33 |
nav ul li a.active{ |
34 |
background: #fff; |
35 |
color:#262626; |
