How do I know which part user is viewing on a webpage?

Question

I built a long page website, so I decide to build a sidebar to navigate user. I want to know which part my user is viewing, so I can change the sidebar css to active or hightlight.

Is there any js or jquery function I can use to get which part user is viewing?

To go to some part he must have clicked or selected some option target that only — Vinay Pratap Singh Bhadauria, Mar 27 '14 at 04:08
interesting, can you show image before active and after active.... — Bhojendra Rauniyar, Mar 27 '14 at 04:13
Since you want to know where you are in the page you'll want to use position() - https://api.jquery.com/position/ — Jay Blanchard, Mar 27 '14 at 04:25
If he gets there by clicking a named anchor, you can check location.hash - but unless you bind to scroll event and watch it, you lose him when he scrolls. — dgo, Mar 27 '14 at 04:27
I get my solution through [this Question][1], Thank you for your help again! [1]: http://stackoverflow.com/questions/2230880/jquery-javascript-find-first-visible-element-after-scroll — user3467010, Mar 27 '14 at 16:59

score 0 · Answer 1 · answered Mar 27 '14 at 04:40

There are some jquery plugins you can use, Ex: Waypoints, Jquery Inview . Using this plugin you can change the class name for sidebar when the user scrolls into some part of the page or section. Simple solution is using $(window).scrollTop()

     $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            //change the class name for sidebar         
                    } else {
            //revert the class name for sidebar
        }
    });

Thank you for your help. But my page is dynamic, the position of each content is variable. Can u help with that? — user3467010, Mar 27 '14 at 16:33

score 0 · Answer 2 · edited May 23 '17 at 10:31

0

I get my solution through This Question.

I can calculate the pixel from the top to the current viewpoint, and then find out the first element's id.

Thank for your help again!

edited May 23 '17 at 10:31

Community

1
1

answered Mar 27 '14 at 17:02

user3467010

21
5

How do I know which part user is viewing on a webpage?

2 Answers2