Skip to content

Commit d84fe49

Browse files
KAJASEKAJASE
committed
Scroll project
1 parent 2ba9677 commit d84fe49

3 files changed

Lines changed: 122 additions & 4 deletions

File tree

‎10-scroll/setup/app.js‎

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,67 @@
44
//offsetTop - A Number, representing the top position of the element, in pixels
55

66
// ********** set date ************
7-
7+
const date = document.getElementById('date');
8+
date.innerHTML = new Date().getFullYear();
89
// ********** close links ************
10+
const navToggle = document.querySelector(".nav-toggle");
11+
const linksContainer = document.querySelector(".links-container");
12+
const links = document.querySelector(".links");
13+
14+
navToggle.addEventListener('click', function(){
15+
//linksContainer.classList.toggle("show-links");
16+
const containerHeight = linksContainer.getBoundingClientRect().height;
17+
const linksHeight = links.getBoundingClientRect().height;
918

19+
if(containerHeight === 0) {
20+
linksContainer.style.height = `${linksHeight}px`;
21+
}else{
22+
linksContainer.style.height = 0;
23+
}
24+
})
1025
// ********** fixed navbar ************
26+
const navbar = document.getElementById("nav");
27+
const topLink = document.querySelector(".top-link");
28+
window.addEventListener("scroll", function(){
29+
const scrollHeight = window.pageYOffset;
30+
const navHeight = navbar.getBoundingClientRect().height;
31+
if(scrollHeight > navHeight) {
32+
navbar.classList.add("fixed-nav");
33+
}else{
34+
navbar.classList.remove("fixed-nav");
35+
}
36+
if(scrollHeight > 500){
37+
topLink.classList.add("show-link");
38+
}else{
39+
topLink.classList.remove("show-link");
40+
}
1141

42+
});
1243
// ********** smooth scroll ************
1344
// select links
45+
const scrollLinks = document.querySelectorAll('.scroll-link');
46+
47+
scrollLinks.forEach(function(link){
48+
link.addEventListener("click", function(e){
49+
e.preventDefault();
50+
const id = e.currentTarget.getAttribute('href').slice(1);
51+
const element = document.getElementById(id);
52+
//calculate the heights
53+
const navHeight = navbar.getBoundingClientRect().height;
54+
const containerHeight = linksContainer.getBoundingClientRect().height;
55+
const fixedNav = navbar.classList.contains('fixed-nav');
56+
let position = element.offsetTop - navHeight;
57+
58+
if(!fixedNav){
59+
position = position - navHeight;
60+
}
61+
if(navHeight > 82){
62+
position = position + containerHeight;
63+
}
64+
window.scrollTo({
65+
left: 0,
66+
top: position,
67+
});
68+
linksContainer.style.height = 0;
69+
});
70+
});

‎10-scroll/setup/index.html‎

Lines changed: 63 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,69 @@
1313
<link rel="stylesheet" href="styles.css" />
1414
</head>
1515
<body>
16-
<h1>scroll project</h1>
16+
<header id="home">
17+
<nav id="nav">
18+
<div class="nav-center">
19+
<div class="nav-header">
20+
<img src="./logo.svg" alt="logo" class="logo">
21+
<button class="nav-toggle">
22+
<i class="fas fa-bars"></i>
23+
</button>
24+
</div>
25+
<div class="links-container">
26+
<ul class="links">
27+
<li>
28+
<a href="#home" class="scroll-link">home</a>
29+
</li>
30+
<li>
31+
<a href="#about" class="scroll-link">about</a>
32+
</li>
33+
<li>
34+
<a href="#services" class="scroll-link">services</a>
35+
</li>
36+
<li>
37+
<a href="#tours" class="scroll-link">tours</a>
38+
</li>
39+
</ul>
40+
</div>
41+
</div>
42+
</nav>
43+
<div class="banner">
44+
<div class="container">
45+
<h1>scroll project</h1>
46+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur aliquid velit ratione. Quibusdam iste vitae eligendi possimus laudantium similique sequi?
47+
</p>
48+
<a href="#tours" class="scroll-link btn btn-white">explore tours
49+
</a>
50+
</div>
51+
</div>
52+
</header>
53+
<section id="about" class="section">
54+
<div class="title">
55+
<h2>about <span>us</span></h2>
56+
</div>
57+
</section>
58+
<section id="services" class="section">
59+
<div class="title">
60+
<h2>our <span>services</span></h2>
61+
</div>
62+
</section>
63+
<section id="tours" class="section">
64+
<div class="title">
65+
<h2>featured <span>tours</span></h2>
66+
</div>
67+
</section>
68+
<footer class="section">
69+
<p>
70+
copyright &copy; backroads trave tours company <span id="date">
71+
72+
</span>
73+
.all rights reserved
74+
</p>
75+
</footer>
76+
<a href="#home" class="scroll-link top-link">
77+
<i class="fas fa-arrow-up"></i>
78+
</a>
1779
<!-- javascript -->
1880
<script src="app.js"></script>
1981
</body>

‎10-scroll/setup/styles.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,7 @@ nav {
213213
.fixed-nav .links a:hover {
214214
color: var(--clr-secondary);
215215
}
216-
/* .fixed-nav .links-container {
216+
/*.fixed-nav .links-container {
217217
height: auto !important;
218218
} */
219219
.nav-header {
@@ -365,7 +365,6 @@ footer p {
365365
border-radius: var(--radius);
366366
color: var(--clr-white);
367367
animation: bounce 2s ease-in-out infinite;
368-
369368
visibility: hidden;
370369
z-index: -100;
371370
}

0 commit comments

Comments
 (0)