Skip to content

Commit 9156c06

Browse files
ProjectRavelProjectRavel
authored
Merge pull request #8 from ProjectRavel/master
Menambahkan Materi Scroll
2 parents e6a31ec + e06f8ca commit 9156c06

File tree

5 files changed

+729
-0
lines changed

5 files changed

+729
-0
lines changed

‎09-Scroll/app.js

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
const dateFooter = document.querySelector('#date')
2+
const linkContainer = document.querySelector('.links-container')
3+
const navToggle = document.querySelector('.nav-toggle')
4+
const link = document.querySelector('.links')
5+
6+
navToggle.addEventListener('click', ()=>{
7+
// linkContainer.classList.toggle('show-links')
8+
const containerHeight = linkContainer.getBoundingClientRect().height
9+
const linksHeight = link.getBoundingClientRect().height
10+
11+
if(containerHeight == 0){
12+
linkContainer.style.height = `${linksHeight}px`
13+
}else{
14+
linkContainer.style.height = 0
15+
}
16+
})
17+
dateFooter.innerHTML = new Date().getFullYear();
18+
19+
// Fixed Nav
20+
const navbar = document.getElementById("nav")
21+
const topLink = document.querySelector('.top-link')
22+
23+
window.addEventListener('scroll', function(){
24+
const scrollHeight = window.scrollY
25+
const navHeight = navbar.getBoundingClientRect().height
26+
27+
28+
if(scrollHeight > navHeight){
29+
navbar.classList.add('fixed-nav')
30+
topLink.classList.add('show-link')
31+
}else{
32+
navbar.classList.remove('fixed-nav')
33+
topLink.classList.remove('show-link')
34+
}
35+
})
36+
37+
// Scroll Link Bug
38+
const scrollLink = document.querySelectorAll('.scroll-link')
39+
40+
scrollLink.forEach((link)=>{
41+
link.addEventListener('click', (e)=>{
42+
// preventDefault
43+
e.preventDefault()
44+
45+
// Navigate to specific spot
46+
const id = e.currentTarget.getAttribute('href').slice(1)
47+
const element = document.getElementById(id)
48+
// Calculate the heights
49+
const navHeight = navbar.getBoundingClientRect().height;
50+
const containerHeight = linkContainer.getBoundingClientRect().height
51+
const fixNav = navbar.classList.contains('fixed-nav')
52+
let position = element.offsetTop
53+
console.log(containerHeight)
54+
console.log(fixNav)
55+
56+
if(fixNav){
57+
window.scrollTo({
58+
left:0,
59+
top:position - navHeight - navHeight,
60+
})
61+
}if(navHeight > 82){
62+
window.scrollTo({
63+
left:0,
64+
top:position - navHeight,
65+
})
66+
}if(!fixNav){
67+
window.scrollTo({
68+
left:0,
69+
top:position - containerHeight - navHeight - 82,
70+
})
71+
}
72+
})
73+
})

‎09-Scroll/hero-bcg.jpeg

111 KB
Loading

‎09-Scroll/index.html

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Scroll</title>
7+
<!-- font-awesome -->
8+
<link
9+
rel="stylesheet"
10+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
11+
/>
12+
<!-- styles -->
13+
<link rel="stylesheet" href="styles.css" />
14+
</head>
15+
<body>
16+
<header id="home">
17+
<!-- navbar -->
18+
<nav id="nav">
19+
<div class="nav-center">
20+
<!-- nav header -->
21+
<div class="nav-header">
22+
<img src="./logo.svg" class="logo" alt="logo" />
23+
<button class="nav-toggle">
24+
<i class="fas fa-bars"></i>
25+
</button>
26+
</div>
27+
<!-- links -->
28+
<div class="links-container">
29+
<ul class="links">
30+
<li>
31+
<a href="#home" class="scroll-link">home</a>
32+
</li>
33+
<li>
34+
<a href="#about" class="scroll-link">about</a>
35+
</li>
36+
<li>
37+
<a href="#services" class="scroll-link">services</a>
38+
</li>
39+
<li>
40+
<a href="#tours" class="scroll-link">tours</a>
41+
</li>
42+
<li>
43+
<a href="#tours" class="scroll-link">tours</a>
44+
</li>
45+
<li>
46+
<a href="#tours" class="scroll-link">tours</a>
47+
</li>
48+
<li>
49+
<a href="#tours" class="scroll-link">tours</a>
50+
</li>
51+
</ul>
52+
</div>
53+
</div>
54+
</nav>
55+
<!-- banner -->
56+
<div class="banner">
57+
<div class="container">
58+
<h1>scroll project</h1>
59+
<p>
60+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas eos
61+
neque sunt in? Id, necessitatibus quos quisquam distinctio
62+
laudantium fugiat?
63+
</p>
64+
<a href="#tours" class="scroll-link btn btn-white">explore tours</a>
65+
</div>
66+
</div>
67+
</header>
68+
<!-- about -->
69+
<section id="about" class="section">
70+
<div class="title">
71+
<h2>about <span>us</span></h2>
72+
</div>
73+
</section>
74+
<!-- services -->
75+
<section id="services" class="section">
76+
<div class="title">
77+
<h2>our <span>services</span></h2>
78+
</div>
79+
</section>
80+
<!-- contact -->
81+
<section id="tours" class="section">
82+
<div class="title">
83+
<h2>featured <span>tours</span></h2>
84+
</div>
85+
</section>
86+
<!-- footer -->
87+
<footer class="section">
88+
<p>
89+
copyright &copy; backroads travel tours company
90+
<span id="date"></span>. all rights reserved
91+
</p>
92+
</footer>
93+
<a class="scroll-link top-link" href="#home">
94+
<i class="fas fa-arrow-up"></i>
95+
</a>
96+
<!-- javascript -->
97+
<script src="app.js"></script>
98+
</body>
99+
</html>

‎09-Scroll/logo.svg

Lines changed: 171 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)