Line 95: | Line 95: | ||
dots[slideIndex-1].className += " active"; | dots[slideIndex-1].className += " active"; | ||
captionText.innerHTML = dots[slideIndex-1].alt; | captionText.innerHTML = dots[slideIndex-1].alt; | ||
+ | } | ||
+ | |||
+ | // Get the offset position of the navbar | ||
+ | var sticky = navbar.offsetTop; | ||
+ | |||
+ | // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position | ||
+ | function myFunction() { | ||
+ | if (window.pageYOffset >= sticky) { | ||
+ | navbar.classList.add("sticky") | ||
+ | } else { | ||
+ | navbar.classList.remove("sticky"); | ||
+ | } | ||
} | } | ||
Line 141: | Line 153: | ||
text-align: center; | text-align: center; | ||
text-decoration: none; | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | /* The sticky class is added to the navbar with JS when it reaches its scroll position */ | ||
+ | .sticky { | ||
+ | position: fixed; | ||
+ | top: 0; | ||
+ | width: 100% | ||
+ | } | ||
+ | |||
+ | /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */ | ||
+ | .sticky + .content { | ||
+ | padding-top: 60px; | ||
} | } | ||
Revision as of 04:40, 30 October 2017