Untitled
unknown
plain_text
a year ago
3.9 kB
12
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