Search
Search Icon Icon to open search JavaScript Sticky Navigation bar Last updated
Jun 29, 2022
المعرفة::
JavaScript The Complete JavaScript Course 2022 From Zero to Expert
1
2
3
4
5
< header >
< nav class = "nav" > ...</ nav >
</ header >
< section class = "section" id = "section--1" >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* NAVIGATION */
. nav {
display : flex ;
justify-content : space-between ;
align-items : center ;
height : 9 rem ;
width : 100 % ;
padding : 0 6 rem ;
z-index : 100 ;
}
/* nav and stickly class at the same time */
. nav . sticky {
position : fixed ;
background-color : rgba ( 255 , 255 , 255 , 0.95 );
}
The idea for stick navigation bar is to add sticky class (which changes the position to fixed) to the nav element whenever it moves over top of the view port. This can be done by listening to
Scroll Event and once the next section top coordinate is less than window’s current top coordinate the sticky class is added. But this approach isn’t recommend because:
Instead, it’s better to use
Intersection Observer API . # Classic Way 1
2
3
4
5
6
7
8
9
10
const section1 = document . querySelector ( '#section--1' );
const nav = document . querySelector ( '.nav' );
const initialCoords = section1 . getBoundingClientRect ();
console . log ( initialCoords );
window . addEventListener ( 'scroll' , function () {
console . log ( window . scrollY );
if ( window . scrollY > initialCoords . top ) nav . classList . add ( 'sticky' );
else nav . classList . remove ( 'sticky' );
});
# Using Intersection Observer APIWe want the navigation bar to be sticky when the header moves completely out of the view, so we will observe the header element. root will be null because we want to observe the entire view port.threshold could be 0, but it’s better to set it to the distance between the start of the section and navigation bar height. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Sticky navigation: Intersection Observer API
const header = document . querySelector ( '.header' );
const navHeight = nav . getBoundingClientRect (). height ;
const stickyNav = function ( entries ) {
// const entry = entries[0];
const [ entry ] = entries ;
// console.log(entry);
if ( ! entry . isIntersecting ) nav . classList . add ( 'sticky' );
else nav . classList . remove ( 'sticky' );
};
const headerObserver = new IntersectionObserver ( stickyNav , {
root : null ,
threshold : 0 ,
// rootMargin: `-90px`,
rootMargin : `- ${ navHeight } px` ,
});
headerObserver . observe ( header );