JQuery - Destacar enlaces de header según hago Scroll

Val: 4

Destacar enlaces de header según hago Scroll

Publicado por José Ángel (3 intervenciones) el 04/10/2016 16:39:55

Buenas tardes:

A ver si me podéis ayudar. El tema es que estoy diseñando una web íntegramente con SublimeText y el tema es que tengo un Header con un UL y este a su vez varios LI que son enlaces <a>. En el body tengo varios SECTION y cada uno corresponde a un LI. Así, cuando pulso un LI, gracias a ScroolTo la página hace Scroll hasta la sección correspondiente y mediante JQuery haré que a ese LI se le agregue una class que lo resalte para que el usuario sepa que está viendo esa parte de la web. Hasta ahí no tengo problema.
El tema es que si yo hago Scroll manualmente, quiero que esa class que destaca el LI se le aplique al LI que corresponda con el SECTION que estoy visualizando y le desaparezca al resto. Ya que conforme lo tengo ahora se queda marcado el LI al que he pinchado pero haciendo scroll manualmente ya no coincide con el SECTION que el usuario está visualizando...

Muchas gracias

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 73

Val: 4

Destacar enlaces de header según hago Scroll

Publicado por José Ángel (3 intervenciones) el 09/10/2016 12:08:07

Al final tras mucho comerme la cabeza y buscar y buscar... he conseguido hacerlo con waypoints que es justo lo que quería hacer pero no sabía como se llamaba. Ahora el problema es que funciona cuando bajo el Scroll pero no cuando lo subo.. Pego el código por si me podéis ayudar.
Gracias.

// Waypoints

$('.post_article').waypoint( function(direction) {

if (direction ==='down') {

var wayID = $(this).attr('id'); (funciona correctamente)

} else {

var previous = $(this).prevAll('.post_article').last(); (aquí es donde estoy atascado ya que el alert da undefined)

alert(previous);

var wayID = $(previous).attr('id');

$('.marcado').removeClass('marcado');

$('header .global ul li a[href=#'+wayID+']').addClass('marcado');

}, { offset: '40%' });

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar