How to know when an item is at the top of the page

Question

I am developing a one page website with several sections (about, contact, services for example)

And a fixed menu, the idea is as the user scrolls the page the fixed menu would change the active links, ie when it was in the contact section, in the fixed menu the contact link was "active"

My doubt is, how to know when the section went through the top of the page, so I could remove the putting links as active, Obs: I use jquery.

If you are interested this is the site http://mkmseguranca.com.br/

Answer 1

    $(window).scroll(function() {
        //Altura atual do scroll
        var tamScroll = $(this).scrollTop();

        //Altura para disparar ação
        if(tamScroll >= 50)
        {
            //Loop para section
            $('.screen').each(function(i) {
                //verifica altura da section
                if ($(this).position().top <= tamScroll - 50) {
                    //Se satisfaz a condição, remove o link atual
                    $('nav a.active').removeClass('active');
                    //Adiciona classe no novo link da section atual
                    $('nav a').eq(i).addClass('active');
                }
            });
        }
        else
        {
            //Caso não satisfaça condição principal, a página está no topo.
            $('nav a.active').removeClass('active');
            $('nav a:first').addClass('active');
        }

    });

Answer 2

You need to check the position of the scroll in each action - scrolling. So:

$(window).scroll(function () {
   var divAtiva;
   $.each($("#conteudo .div-interna"), function (indice, obj) {
      if (!divAtiva || ($(this).scrollTop() >= $(obj).offset().top * 0.80 && divAtiva.top < $(obj).offset().top * 0.80))
         divAtiva = { elementId: $(obj).attr("id"), top: $(obj).offset().top };
  });
  MetodoQueSelecionaOMenu(divAtiva);
});

Supposing its structure is something similar to:

<div id="conteudo">
<div class="div-interna" id="div1">...</div>
<div class="div-interna" id="div2">...</div>
<div class="div-interna" id="div3">...</div>
</div>

I took it into consideration that you would like to select the active div when the scrolling reaches 80% of your top, okay? Other than that, just change the calculation here: $(obj).offset().top * 0.80 for the amount you want. (=