Skip to content
This repository has been archived by the owner on Jan 24, 2018. It is now read-only.

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

Open
agualbbus opened this issue Oct 23, 2014 · 2 comments
Open

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

agualbbus opened this issue Oct 23, 2014 · 2 comments

Comments

@agualbbus
Copy link

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
Copy link

sarboc commented Oct 23, 2014

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
Copy link
Author

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants