Untitled
unknown
plain_text
5 months ago
3.9 kB
9
Indexable
var scrollElementsA = $('.scroll-to-bullets a'); var scrollElementsALength = scrollElementsA.length - 1; scrollElementsA.each(function(i, index) { var $this = $(this); var title = $this.data('title'); $this.find('strong').text(title); console.log(i); if(scrollElementsALength <= i ) { return; } $this.after('<div class="scroll-to-divider"></div>'); }); $('.scroll-to-bullets').append('<div class="scroll-to-mover"></div>'); // gsap.to(".scroll-to-mover", {top:70, duration: 1}); const scrollElement = window.document.scrollingElement || window.document.body || window.document.document; // Sections are zero indexed to match array from getElementsByClassName var scroll = { activeSection: 0, totalSections: document.getElementsByClassName('section').length, throttled: false, throttleDur: 600, } var downSection = () => { if (scroll.activeSection < 4) { ++scroll.activeSection updateSectionNumber(scroll.activeSection) scrollToSection(scroll.activeSection) } } var upSection = () => { if (scroll.activeSection > 0) { --scroll.activeSection updateSectionNumber(scroll.activeSection) scrollToSection(scroll.activeSection) } } var scrollToSection = (section) => { anime({ targets: scrollElement, scrollTop: (section) * window.innerHeight, duration: scroll.throttleDur, easing: 'linear' }) console.log(section); var scrollToElement = $(".scroll-to-bullets a:eq(" + section + ")") ; console.log(scrollToElement); console.log(scrollToElement.position()); gsap.to(".scroll-to-mover", {top:scrollToElement.position().top + 47, duration: 1}); scroll.activeSection = section } var updateSectionNumber = (activeSection) => { // window.document.getElementById('sectionnumber').innerHTML = "Active Section: " + activeSection } window.addEventListener("keydown", function(e) { if ([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) { e.preventDefault() } if(!scroll.throttled) { scroll.throttled = true setTimeout(function() { scroll.throttled = false }, 1.5 * scroll.throttleDur) if ([32, 40].indexOf(e.keyCode) > -1) { downSection() } if ([38].indexOf(e.keyCode) > -1) { upSection() } } }, false) window.addEventListener('scroll', function(e) { e.preventDefault() }, false) window.addEventListener('wheel', function(e) { e.preventDefault() if(isMenuOpened ) { return; } if (!scroll.throttled) { scroll.throttled = true setTimeout(function() { scroll.throttled = false }, 1.5 * scroll.throttleDur) if(e.deltaY < 0) { upSection() } else { downSection() } } }, false) var initialY = null window.addEventListener('touchstart', function(e) { initialY = e.touches[0].clientY }, false) window.addEventListener('touchmove', function(e) { e.preventDefault() if(isMenuOpened ) { return; } if (initialY === null) { return } var currentY = e.touches[0].clientY; var diffY = initialY - currentY; if(!scroll.throttled) { scroll.throttled = true setTimeout(function() { scroll.throttled = false }, 1.5 * scroll.throttleDur) if (diffY > 0) { downSection() } else { upSection() } } initialy = null }, {passive: false}) // Scroll back to correct section when resized. window.addEventListener('resize', function(e) { scrollToSection(scroll.activeSection) }, false)
Editor is loading...
Leave a Comment