Skip to content

Menambahkan Materi Scroll #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 24, 2024
Merged

Menambahkan Materi Scroll #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 73 additions & 0 deletions 09-Scroll/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
const dateFooter = document.querySelector('#date')
const linkContainer = document.querySelector('.links-container')
const navToggle = document.querySelector('.nav-toggle')
const link = document.querySelector('.links')

navToggle.addEventListener('click', ()=>{
// linkContainer.classList.toggle('show-links')
const containerHeight = linkContainer.getBoundingClientRect().height
const linksHeight = link.getBoundingClientRect().height

if(containerHeight == 0){
linkContainer.style.height = `${linksHeight}px`
}else{
linkContainer.style.height = 0
}
})
dateFooter.innerHTML = new Date().getFullYear();

// Fixed Nav
const navbar = document.getElementById("nav")
const topLink = document.querySelector('.top-link')

window.addEventListener('scroll', function(){
const scrollHeight = window.scrollY
const navHeight = navbar.getBoundingClientRect().height


if(scrollHeight > navHeight){
navbar.classList.add('fixed-nav')
topLink.classList.add('show-link')
}else{
navbar.classList.remove('fixed-nav')
topLink.classList.remove('show-link')
}
})

// Scroll Link Bug
const scrollLink = document.querySelectorAll('.scroll-link')

scrollLink.forEach((link)=>{
link.addEventListener('click', (e)=>{
// preventDefault
e.preventDefault()

// Navigate to specific spot
const id = e.currentTarget.getAttribute('href').slice(1)
const element = document.getElementById(id)
// Calculate the heights
const navHeight = navbar.getBoundingClientRect().height;
const containerHeight = linkContainer.getBoundingClientRect().height
const fixNav = navbar.classList.contains('fixed-nav')
let position = element.offsetTop
console.log(containerHeight)
console.log(fixNav)

if(fixNav){
window.scrollTo({
left:0,
top:position - navHeight - navHeight,
})
}if(navHeight > 82){
window.scrollTo({
left:0,
top:position - navHeight,
})
}if(!fixNav){
window.scrollTo({
left:0,
top:position - containerHeight - navHeight - 82,
})
}
})
})
Binary file added 09-Scroll/hero-bcg.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
99 changes: 99 additions & 0 deletions 09-Scroll/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Scroll</title>
<!-- font-awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<!-- styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header id="home">
<!-- navbar -->
<nav id="nav">
<div class="nav-center">
<!-- nav header -->
<div class="nav-header">
<img src="./logo.svg" class="logo" alt="logo" />
<button class="nav-toggle">
<i class="fas fa-bars"></i>
</button>
</div>
<!-- links -->
<div class="links-container">
<ul class="links">
<li>
<a href="#home" class="scroll-link">home</a>
</li>
<li>
<a href="#about" class="scroll-link">about</a>
</li>
<li>
<a href="#services" class="scroll-link">services</a>
</li>
<li>
<a href="#tours" class="scroll-link">tours</a>
</li>
<li>
<a href="#tours" class="scroll-link">tours</a>
</li>
<li>
<a href="#tours" class="scroll-link">tours</a>
</li>
<li>
<a href="#tours" class="scroll-link">tours</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- banner -->
<div class="banner">
<div class="container">
<h1>scroll project</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas eos
neque sunt in? Id, necessitatibus quos quisquam distinctio
laudantium fugiat?
</p>
<a href="#tours" class="scroll-link btn btn-white">explore tours</a>
</div>
</div>
</header>
<!-- about -->
<section id="about" class="section">
<div class="title">
<h2>about <span>us</span></h2>
</div>
</section>
<!-- services -->
<section id="services" class="section">
<div class="title">
<h2>our <span>services</span></h2>
</div>
</section>
<!-- contact -->
<section id="tours" class="section">
<div class="title">
<h2>featured <span>tours</span></h2>
</div>
</section>
<!-- footer -->
<footer class="section">
<p>
copyright &copy; backroads travel tours company
<span id="date"></span>. all rights reserved
</p>
</footer>
<a class="scroll-link top-link" href="#home">
<i class="fas fa-arrow-up"></i>
</a>
<!-- javascript -->
<script src="app.js"></script>
</body>
</html>
171 changes: 171 additions & 0 deletions 09-Scroll/logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading