samedi 24 janvier 2015

Nav bar highlighting appropriate link when distinct point in document is reached

What I've tried so far is storing the 'body' element in a variable pointing to $('body').scrollTop() within a scroll function which is to keep track of where in the page the user is scrolled. The range of numbers, if scrolled just using a mouse wheel is typically from 0 (the top of the page) to whatever the bottom value of the page is, in intervals of 100 (per tick).


I have the header of each section assigned an ID, as well as each link in the navbar.


Each time one of the intervals is reached (at/ between sections), all current highlights are removed, then the highlight for the appropriate link is applied.


It works to an extent - the four links on the Nav, 'home', 'portfolio', 'contact' and 'about', each with IDs suffixed by '-nav' all highlight properly, except for the 'contact' link.


Currently the height of each section is equal, there are no spelling mistakes in my HTML or my js file. The logic for the highlighting of the 'contact' link follows the same pattern as the other nav link highlighting - yet no highlight.


The other issue is that I'm not sure how to implement somewhat of a snapping effect. I want the user to be able to read the entire section of a page, then as soon as that section reaches its end, the document will scroll to the top of the next section fluidly.


Any ideas?





Aucun commentaire:

Enregistrer un commentaire