Getting the ID of the div at current position

Question

I have n number of <section> in a page. Each one is provided with id such as 'page1', 'page2'...

At the top I place 2 buttons say Previous and Next. When Previous is pressed it will be scrolled to the Previous <section>. Similarly to the next <section> on pressing Next Button.

But now the problem is when a user scrolls the page using the scroll bar, how can I detect which <section> the user is viewing?

This question may help you: http://stackoverflow.com/questions/2940006/what-is-scrolltop-and-scrollheight. You could use scroll differentiation to work out where on the page the user is? It's a good question but post your code to get us started. — George, Mar 19 '13 at 09:54
Get the scroll offset and compare it to the offset of the sections. — James Coyle, Mar 19 '13 at 09:55
As everyone has said, using the scroll position and comparing it to the offset of the sections is the way to go. An example of this in action to have a look through can be seen on bootstrap at: http://twitter.github.com/bootstrap/javascript.html (and how it handles the navigation state). This is built in as 'scrollspy' a fiddle of this in action is linked to from this answer: http://stackoverflow.com/questions/13134013/how-to-use-bootstrap-scroll-spy — Craig Blagg, Mar 19 '13 at 10:06
@Pete I am aware of using variable for Previous and Next buttons, the problem raised when a user does not click on Previous and Next buttons and scroll using scrollbars. — Sarvap Praharanayuthan, Mar 19 '13 at 10:25
@SuryaS see my changes, would be great if you could post you solution, if you got one ;) — FibreFoX, Mar 20 '13 at 12:19

FibreFoX · Accepted Answer · 2013-03-20T11:27:54.260

You can check if your section is in the "ViewPort", i am using this to find out:

function isTotallyInViewPort($entry){
    var windowScrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();
    var windowVisibleBottom = windowScrollTop + windowHeight;
    var entryTop = $entry.offset().top;
    var entryOuterHeight = $entry.outerHeight();
    var entryVisibleBottom = entryTop + entryOuterHeight;

    var isInView = windowScrollTop < ( entryTop ) < (windowVisibleBottom);
    if(!isInView) return false;

    var isCompleteInView = ( entryVisibleBottom ) < (windowVisibleBottom);
    return isCompleteInView;
}

if you want to detect if PARTS are shown, just create a function that checks if the current view is overlapping with the position of your section.

you may bind it to $(window).on("scroll")

edit: i think this should detect if your elements are shown (not tested yet)

function isPartlyInViewPort($entry){
    var windowScrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();
    var windowVisibleBottom = windowScrollTop + windowHeight;
    var entryTop = $entry.offset().top;
    var entryOuterHeight = $entry.outerHeight();
    var entryVisibleBottom = entryTop + entryOuterHeight;

    var isAboveViewPort = entryVisibleBottom < windowScrollTop;
    var isBelowViewPort = windowVisibleBottom < entryTop;

    return !(isAboveViewPort || isBelowViewPort);
}

If people want to create this without using jQuery, and don't care about Internet Explorer, you should take a look at the "Intersection Observer API" at https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API — FibreFoX, Jan 20 '20 at 13:40

Getting the ID of the div at current position

1 Answers1

Linked