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
|
<nav class="navWrap">
<div class="logo">
<a href="index.php">
<img src="../../assets/img/logo_white.png" alt="logo" class="img-fluid" />
</a>
</div>
<div class="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<div class="menuWrap">
<div class="searchWrap">
<div class="inputGroup">
<input class="form-control me-2 search" type="search" placeholder="Search" aria-label="Search">
<a class="searchBtn" href="#"><i class="fas fa-search"></i></a>
</div>
</div>
<ul class="nav-links">
<li><a href="about.php">About Us</a></li>
<li><a href="news_list.php">News & Events</a></li>
<li><a href="business_list.php">Business Info</a></li>
<li><a href="reference_website.php">Reference Website</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>
</div>
</nav>
<script>
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $(".navWrap").outerHeight();
$(window).scroll(function(event) {
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if (Math.abs(lastScrollTop - st) <= delta) return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight) {
// Scroll Down
$(".navWrap").addClass("nav-up");
} else {
// Scroll Up
if (st + $(window).height() < $(document).height()) {
$(".navWrap").removeClass("nav-up");
}
}
lastScrollTop = st;
}
const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");
hamburger.addEventListener('click', () => {
//Animate Links
navLinks.classList.toggle("open");
links.forEach(link => {
link.classList.toggle("fade");
});
//Hamburger Animation
hamburger.classList.toggle("toggle");
});
</script>
|