Untitled

 avatar
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