It is necessary to make sure that when scrolling through the landing page, this or that menu item is automatically highlighted, showing where we are.

  • And you think over algorithm. it's easy - mountpoint
  • Need to. Definitely. =) - Crus
  • @skies, If you are given an exhaustive answer, mark it as correct (click on the check mark next to the selected answer). - Vitalina

1 answer 1

  1. Create an array with the "heights" of your screens:

    $('.scene').offset().top;

  2. Hang an event on $ (window):

    $(window).scroll(function(e){ /* */ });

  3. Inside this event, "monitor" the scrollTop parameter:

     var $window = $(window); $window.scroll(function(){ var cursor = $window.scrollTop(); console.log(cursor); });

This will be the height of the current scroll. Compare it with your "array of heights" and highlight the active point.

Some tips:

  1. The less code in the event's callback, the faster the page will run.

  2. It is considered a good practice to hang not only on the scroll event, but also resize sometimes to others.

  3. When finding the desired height for the active point to exit the cycle, for faster triggering of the event.

  4. Do not use this implementation on mobile devices (many problems, there’s not enough to describe the page).

  5. There are some problems with all Internet Explorer browsers: they will scroll first, and then get into Kolbek. All other browsers first work out Kolbek, and then scroll (with the ability to preventDefault/return false .