Last active
June 12, 2016 11:37
-
-
Save shettayyy/e7cf7d0c7a1a8f2ecdc6d57be478f67b to your computer and use it in GitHub Desktop.
Auto show hide sliding header with setInterval using pure javascript
This file contains 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
import classie from 'desandro-classie'; | |
export function SlidingHeader(options) { | |
this.init(options); | |
} | |
SlidingHeader.prototype.init = function(options) { | |
// Define the settings as an object | |
let settings = { | |
'element': options.element, | |
'class': 'to_scroll' | |
}; | |
// If the target element has a specific class declared in the object passed, | |
// replace the default class key in settings object | |
if (options.class) { | |
settings.class = options.class; | |
} else { | |
console.error('Please provide a class property.'); | |
return; | |
} | |
// Get the target element from the DOM | |
let elementToSlide = document.querySelector(settings.element); | |
// If there's a valid element, slide it. If not, just return false | |
if (elementToSlide !== null) { | |
let elementSettings = { | |
'elementHeight': elementToSlide.clientHeight, | |
'class': settings.class | |
}; | |
this.slide(elementToSlide, elementSettings); | |
} else { | |
return false; | |
} | |
}; | |
SlidingHeader.prototype.slide = function(element, elementSettings) { | |
let offset = 0, | |
lastPosition = 0, | |
targetClass = elementSettings.class, | |
elementHeight = elementSettings.elementHeight, | |
didScroll; | |
window.addEventListener('scroll', function(e) { | |
didScroll = true; | |
}); | |
function hasScrolled() { | |
let newPosition = this.scrollY, | |
position = newPosition - lastPosition; | |
// If we scrolled more than the element's height, then add the class to it. | |
// Else, remove it, and the element will show up again | |
if (offset + position > elementHeight) { | |
offset = elementHeight; | |
if (!classie.has( element, targetClass)) { | |
classie.add( element, targetClass); | |
} | |
} else { | |
offset = offset + position; | |
if (classie.has( element, targetClass)) { | |
classie.remove( element, targetClass); | |
} | |
} | |
if (offset < 0) { | |
offset = 0; | |
} | |
lastPosition = newPosition; | |
} | |
setInterval(function() { | |
if (didScroll) { | |
hasScrolled(); | |
didScroll = false; | |
} | |
}, 250); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Sources
Mariusc23
auto-show-hide-sliding-header-with-pure-javascript