Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var Sticky = function(selector, containerSelector) {
- var element = document.querySelector(selector),
- containerElement = document.querySelector(containerSelector),
- elementTop = parseInt(window.getComputedStyle(element, null).marginTop),
- stickedClass = 'sticked',
- grabEndClass = 'grab-end',
- elementStart, containerElementFinish;
- if (!canSticky) {
- return;
- }
- setPoints();
- window.addEventListener('scroll', function() {
- if (window.scrollY >= elementStart && window.scrollY < containerElementFinish) {
- sticky();
- } else if (window.scrollY >= containerElementFinish) {
- grabEnd();
- } else {
- reset();
- }
- });
- // Private
- function offset(element) {
- var rectangle = element.getBoundingClientRect();
- return {
- top: rectangle.top + document.body.scrollTop,
- left: rectangle.left + document.body.scrollLeft
- }
- }
- function canSticky() {
- if (!element && !containerElement) {
- return false;
- }
- if (window.innerHeight <= 710 || window.innerWidth <= 768) {
- return false;
- }
- return true;
- }
- // Public
- function reset() {
- element.classList.remove(stickedClass, grabEndClass);
- setPoints();
- }
- function sticky() {
- element.classList.remove(grabEndClass);
- element.classList.add(stickedClass);
- }
- function grabEnd() {
- element.classList.remove(stickedClass);
- element.classList.add(grabEndClass);
- }
- function setPoints() {
- elementStart = offset(element).top - elementTop;
- containerElementFinish = offset(containerElement).top + containerElement.offsetHeight - element.offsetHeight - elementTop;
- }
- return {
- reset: reset,
- sticky: sticky,
- grabEnd: grabEnd,
- setPoints: setPoints
- };
- };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement