Prinzhorn / skrollr-menu

skrollr plugin for hash navigation
MIT License
285 stars 143 forks source link

handleLink() - How to get actual scrolling direction? #58

Open agualbbus opened 9 years ago

agualbbus commented 9 years ago

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!

sarboc commented 9 years ago

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...

agualbbus commented 9 years ago

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.