skrollr-menu
skrollr-menu copied to clipboard
handleLink() - How to get actual scrolling direction?
I'm using skrollr-menu like this:
<a href="#slide4" data-menu-top="250p"></a>
I'm using the skrollr keyframe option to high light the menu items when reaching the desired position, but the events are not fired when skrollr-menu reaches the data-menu-top scrolling value. In order to get the event fired I need to +1p when scrolling down and -1p when up.
So I came up with this possible solution:
<a href="#slide4" data-menu-top="250"></a>
handleLink: function(link) {
var t=parseInt(link.getAttribute('data-menu-top'));
if(scrolling=='down'){
t = String(t+1)+'p';
}
else{
t = String(t-1)+'p';
}
//console.log(t);
return t;
},
But I dont' t know how to get the scrolling direction.... Can you help me please?
Thanks!
Hi there! Here's how I tackled the issue in a project I recently worked on:
function scrolling() {
var lastScrollTop = 0;
$(window).scroll(function() {
var current = $(this).scrollTop();
if (current > lastScrollTop) {
// downscrolling!
(put downscrolling stuff here)
} else {
//upscrolling!
(put upscrolling stuff here)
}
lastScrollTop = current;
});
}
Curious if others have better solutions...
sarboc thanks for your reply, I couldn't use your snippet because the handleLink function runs before the scrolling event, but it inspire me and I finally I came with this:
<a href="#slide4" data-menu-top="250"></a>
(position in percentage value without "p")
handleLink: function(link) {
var target=parseInt(link.getAttribute('data-menu-top')),//percentage position of target
currentTop = $(window).scrollTop();
currentTop=Math.round(sizes.bodyH()) * currentTop / 100; //convert to percentage
target=(currentTop < target) ? String(target+1)+'p' : String(target-1)+'p';
//console.log(target);
return target;//ex: 251p
},
Need to improve yet, sometimes that -+1p gives an undesired offset, but I achived the main goal that was to fire the event that high lights those links.