JavaScript Desplaza el ID del elemento de la vista actual

Disculpas si esta pregunta ya fue hecha / respondida. Tengo una página html (esta página tiene la biblioteca JQuery) con muchas tags de párrafo. Cada etiqueta de párrafo (p) está asociada a una etiqueta de anclaje con un nombre. Tenga en cuenta que el contenido dentro de estos párrafos puede variar. Cuando el usuario se desplaza por la página, ¿cómo puedo obtener el nombre de la etiqueta de anclaje en la vista actual?

some long text

some text

some long text

puedes usar

 $(document).ready(function(){ $(window).on('scroll',function(){ var Wscroll = $(this).scrollTop(); $('a[name^="para"]').each(function(){ var ThisOffset = $(this).closest('p').offset(); if(Wscroll > ThisOffset.top && Wscroll < ThisOffset.top + $(this).closest('p').outerHeight(true)){ $(this).closest('p').css('background','red'); console.log($(this).attr('id')); // will return undefined if this anchor not has an Id // to get parent 

id console.log($(this).closest('p').attr('id')); // will return the parent

id } }); }); });

Manifestación

Nota: no te olvides de incluir Jquery

Para explicar: $(this) inside .each() seleccione anchors con el nombre comienza con para .. closest('p') para seleccionar parent

de este ancla … así que juegue alrededor de esto para llegar a lo que desee

Si alguien está interesado en una solución inmediata, consulte https://www.customd.com/articles/13/checking-if-an-element-is-visible-on-screen-using-jquery también. Funciona bien cuando lo mezclas con la respuesta de Mohamed-Yousef.

  • Agregar referencia jquery
  • Agregar la referencia jquery.visible.js
 $(function(){ $(window).on('scroll',function(){ $('a[name^="para"]').each(function(){ var visible = $(this).visible( false ); if(visible){ console.log($(this).attr('name')); return false; } }); }); });