FazBrowse GitHub Viewer
|
Trending
|
URL:
|
Home
Tools:
[Download Repo ZIP]
[View Raw Code]
[Original HTTPS Page]
javascript-basic-projects/10-scroll/final/app.js at master · gkumar9891/javascript-basic-projects · GitHub
gkumar9891
javascript-basic-projects
Repository navigation
Code
Pull requests
Actions
Projects
Security and quality
Insights
Expand file tree
Breadcrumbs
javascript-basic-projects
/
10-scroll
/
final
/
app.js
Copy path
More file actions
More file actions
Latest commit
History
History
History
84 lines (71 loc) · 2.65 KB
Breadcrumbs
javascript-basic-projects
/
10-scroll
/
final
/
app.js
Copy path
File metadata and controls
84 lines (71 loc) · 2.65 KB
Raw
Copy raw file
Download raw file
Open symbols panel
Edit and raw actions
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
// Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.
// pageYOffset is a read - only window property that returns the number of pixels the document has been scrolled vertically.
// slice extracts a section of a string without modifying original string
//offsetTop - A Number, representing the top position of the element, in pixels
// ********** set date ************
// select span
const
date
=
document
.
getElementById
(
"date"
)
;
date
.
innerHTML
=
new
Date
(
)
.
getFullYear
(
)
;
// ********** close links ************
const
navToggle
=
document
.
querySelector
(
".nav-toggle"
)
;
const
linksContainer
=
document
.
querySelector
(
".links-container"
)
;
const
links
=
document
.
querySelector
(
".links"
)
;
navToggle
.
addEventListener
(
"click"
,
function
(
)
{
// linksContainer.classList.toggle("show-links");
const
linksHeight
=
links
.
getBoundingClientRect
(
)
.
height
;
const
containerHeight
=
linksContainer
.
getBoundingClientRect
(
)
.
height
;
if
(
containerHeight
===
0
)
{
linksContainer
.
style
.
height
=
`
${
linksHeight
}
px`
;
}
else
{
linksContainer
.
style
.
height
=
0
;
}
// console.log(linksContainer.getBoundingClientRect());
}
)
;
// ********** fixed navbar ************
const
navbar
=
document
.
getElementById
(
"nav"
)
;
const
topLink
=
document
.
querySelector
(
".top-link"
)
;
window
.
addEventListener
(
"scroll"
,
function
(
)
{
const
scrollHeight
=
window
.
pageYOffset
;
const
navHeight
=
navbar
.
getBoundingClientRect
(
)
.
height
;
if
(
scrollHeight
>
navHeight
)
{
navbar
.
classList
.
add
(
"fixed-nav"
)
;
}
else
{
navbar
.
classList
.
remove
(
"fixed-nav"
)
;
}
// setup back to top link
if
(
scrollHeight
>
500
)
{
console
.
log
(
"helo"
)
;
topLink
.
classList
.
add
(
"show-link"
)
;
}
else
{
topLink
.
classList
.
remove
(
"show-link"
)
;
}
}
)
;
// ********** smooth scroll ************
// select links
const
scrollLinks
=
document
.
querySelectorAll
(
".scroll-link"
)
;
scrollLinks
.
forEach
(
(
link
)
=>
{
link
.
addEventListener
(
"click"
,
(
e
)
=>
{
// prevent default
e
.
preventDefault
(
)
;
// navigate to specific spot
const
id
=
e
.
currentTarget
.
getAttribute
(
"href"
)
.
slice
(
1
)
;
const
element
=
document
.
getElementById
(
id
)
;
const
navHeight
=
navbar
.
getBoundingClientRect
(
)
.
height
;
const
containerHeight
=
linksContainer
.
getBoundingClientRect
(
)
.
height
;
const
fixedNav
=
navbar
.
classList
.
contains
(
"fixed-nav"
)
;
let
position
=
element
.
offsetTop
-
navHeight
;
if
(
!
fixedNav
)
{
position
=
position
-
navHeight
;
}
if
(
navHeight
>
82
)
{
position
=
position
+
containerHeight
;
}
window
.
scrollTo
(
{
left
:
0
,
top
:
position
,
}
)
;
// close
linksContainer
.
style
.
height
=
0
;
}
)
;
}
)
;
// calculate heights
Back
|
FazBrowse Home
|
New Git URL