Last active
August 29, 2019 11:08
-
-
Save pavan-idapalapati/fd536808cea5cebb7def428936b44163 to your computer and use it in GitHub Desktop.
Spiceworks on-scroll fixed header functionality
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Html Code | |
//Note: fixed position style should be in inline style. | |
<header class="dell-infographic" id="app-fixed-header" style="position:fixed"></header> | |
//JS code | |
/* | |
* getting the fix header element | |
*/ | |
var appHeader = document.querySelector('#app-fixed-header'); | |
/* | |
* This function will set the top value to the fixed header element based on the scroll top | |
*/ | |
function adjustHeader() { | |
if (appHeader.style.position == "fixed") { | |
var spiceWorksHeader = document.querySelector('.sui-opt-in'); | |
var topVal = spiceWorksHeader.getBoundingClientRect().top + spiceWorksHeader.scrollHeight; | |
if (topVal >= 0) { | |
appHeader.style.top = topVal + "px"; | |
} | |
else { | |
appHeader.style.top = "0"; | |
} | |
} | |
} | |
window.addEventListener('scroll', function () { | |
adjustHeader(); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment