distinguish below & above

[Metis77]

I usually need do distinguish if an element is below or above viewport.

For example:
I want to animate something when scrolling down to it.
But after I scrolled it out of viewport again (above it) or when I load page an element is above viewport I need to distinguish this state from the one when the element is below viewport.

[joeyhoer]

I have the same issue.

One of my biggest UX frustrations is when I'm reading an article and the comments section is longer than the article. I want the scroll bar to serve as a virtual progress indicator, because IMO, that’s exactly what it is.

To accomplish this, I'm showing comments (in a single page toggle, similar to an accordion) only when the comments section is in view. If I scroll back up the page, the comments should be hidden again, returning to an accurate scroll bar. However, if I scroll past the comments (into a long footer for example) I don't want the comments section to collapse because that would present a jarring shift in page content.

In other words, I want to hide comments while they are "below view" and show comments when they are "in or above" view.

[camwiegert]

@Metis77 @joeyhoer Interesting use cases that I hadn't thought of. How do you imagine this would fit into the API? As events?

inView('.someSelector').on('above', someFunc);
inView('.someSelector').on('below', someFunc);

[Metis77]

probably as events.
Not sure what would be the best approach.

maybe:
on(is_above
on(isnot_above
on(is_inview
on(isnot_inview
on(is_below
on(isnot_below

or simply:
on(above
on(inview_enter
on(inview_exit
on(below

[banago]

I use a jQuery plugin for this functionality. I really love this library and I aim to include switch to this in the near-future. With what I have in place I needed to work with above/below and I custom build that part. What would make sense for me is to pass the direction to the event object as e.direction so in the doSomething function we can work with it. Example:

inView('.someSelector')
    .on('enter', doSomething)
    .on('exit', doSomethingElse);

function doSomething(e){
    switch (e.direction) {
        case 'top':
            handleTop();
        break;
        case 'bottom':
            handleBottom();
        break;
        case 'left':
            handleLeft();
        break;
        case 'right':
            handleRight();
        break;
    }
}

I hope this helps.

[qasimalyas]

This would be a good addition to the library. Something I would find really useful.

[dangelion]

@camwiegert this library is awesome but I really need this feature (above/below). Have you in plan to implement it soon? Thanks

[camwiegert]

I think this issue will be addressed in an upcoming release. The plan is to make the calculated intersection available to registered callbacks. For example...

inView('.someSelector')
  .on('enter', (el, intersection) => {
    console.log(intersection);
    // { top: -350, right: 40, bottom: 10, left: 80 }
  });

There are quite a few permutations of elements entering/exiting the viewport, so we just provide this raw info and let the user draw their own conclusions. From the above you might conclude that the element just entered the screen from the top, depending on the specific case.

[GreenSunBear]

Great functionality that can definitely help create better user interactions!
I wonder if there are any news on this feature ? or maybe a snippet to work with ? Thanks