JQuery detect if an element with particular id is visible after page scrolling

Question

I want to create the navigation as it is shown on page http://kiskolabs.com/

I've already created sticky menu however the problem begins with marking active element in menu.

The question is:

How can I detect if page is scrolled to particular id?

Let's say I have some headers like.

<h1 id="whatisit">What is it</h1>
<h1 id="desc">Description</h1>
<h1 id="faq">FAQ</h1>

and menu

<nav>
  <a href="#whatisit">What is it</a>
  <a href="#desc">Description</a>
  <a href="#faq">FAQ</a>
</nav>

I want highlight menu (add class or whatever) when page scrolls to this element.

I've found already how to scroll element to particular ID in this thread but I don't know how to detect on what id the is now. The size of page is dynamic and may change during content. So absolute solution what I thought of is bad.

What I got so far for scrolling:

$("nav a").click(function (){
   $("html, body").animate({ scrollTop: $($(this).attr('href')).offset().top }, 1000);
});

I've also found this solution but maybe is there better way to achieve it?

Edit

This question is not duplicate of the question suggested by moderator. Moreover, that question does not have the accepted answer. My problem is a bit more advanced.

Why is it not a duplicate? Simply stating it will not convince anyone. Add details to your question that demonstrate the difference. — Kate Gregory, Jun 05 '13 at 20:55

score 0 · Answer 1 · answered Jun 05 '13 at 11:30

0

You could use animate callback function:

$("nav a").click(function () {
    $("html, body").animate({
        scrollTop: $(this.href).offset().top
    }, 1000, function () {
        $(this).addclass('scrolled').siblings('h1').removeClass('scrolled');
    });
});

answered Jun 05 '13 at 11:30

A. Wolff

74,033
9
94
155

what if person does not use click on `nav a` and scroll the page with scrollbar? – Robert Jun 05 '13 at 11:37
Well, you could still code this logic yourself but i'll suggest to handle all case to use then a plugin, maybe the plugin linked in your question. You are correct, i misread your question – A. Wolff Jun 05 '13 at 11:39

score 0 · Accepted Answer · answered Jun 06 '13 at 12:04

During a lot of trying and finding solutions in Internet I've solved my problem.

I've used waypoints plugin which appeared very easy to use. The plugin can be downloaded here.

The html code of menu:

        <nav>
            <a href="#whatisit" class="scrollable">....</a>
            <a href="#howworks"  class="scrollable">....</a>
            <a href="#whydata" class="scrollable" >....</a>
            <a href="#spec"  class="scrollable">...</a>
        </nav>

and html code of headers where page is to be scrolled:

<h2 class="scrollable" id="whatisit">...</h2>
<h2 class="scrollable" id="spec">...</h2>

Jquery code to make page scroll on particular element with #id the same as a href attribute.

$("nav a.scrollable").click(function (){
    var elementClickedHref = $(this).attr('href');
    $('html, body').animate({
                scrollTop: $(elementClickedHref).offset().top-100
                 }, 2000);  
    return false;
});

To change color of element which is currently active after scrolling I've used waypoint plugin. The code below finds h2 which is scrollable and get it's id. Then finds which links that are scrollable too has href same as id of a element and adds active class to this id and remove active class from inactive elements.

$('h2.scrollable').waypoint(function() {
    var idToCheck = '#' + $(this).attr('id');
    $('a.scrollable').removeClass('active');
    $('a.scrollable[href="'+idToCheck+'"]').addClass('active');
}, {
    offset: '100%'
});

It works perfectly as I wanted. I hope this solution will help someone who will face such problem.

JQuery detect if an element with particular id is visible after page scrolling

2 Answers2