Encontrar la position del elemento en el desplazamiento del browser

Necesito ayuda para encontrar la position de los elementos. Estoy trabajando en un lector de libros electrónicos, también es todo Html con CSS. Todo html seccionado página por página, y tengo que encontrar un elemento como este

<span name="Note" style="background-color:rgb(255,255,204)">Example</span>

Todo el mundo sugiere un código como este;

 function position(elem) { var left = 0, top = 0; do { left += elem.offsetLeft; top += elem.offsetTop; } while ( elem = elem.offsetParent ); return [ left, top ]; }position(document.getElementsByName('Note')[0]); 

pero no funciona para mí; Necesito la position real del elemento en desplazamiento con JavaScript.

4 Solutions collect form web for “Encontrar la position del elemento en el desplazamiento del browser”

 var note = document.getElementsByName('Note')[0]; var screenPosition = note.getBoundingClientRect(); 

El ClientRect devuelto por getBoundingClientRect() tiene valores para .top , .left , .right , .bottom , .width y .height .

Estas son posiciones de píxeles en la window visible; a medida que desplaza la página, los valores .top y .bottom cambiarán, e incluso pueden volverse negativos a medida que el elemento se desplaza por la parte superior de la vista.

Tenga en count que, a diferencia de la solución que acumula offsetLeft / offsetTop esta solución representa correctamente los bordes y el relleno en el body y los elementos html en todos los browseres (Firefox).

Vea este caso de testing: http://jsfiddle.net/QxYDe/4/ (recorra la página y observe cómo cambian los valores).

También es compatible con Internet Explorer .

Supongo que necesitas que la nota permanezca fija en la esquina superior izquierda todo el time. Incluso cuando se desplaza?

¡Puedes hacer esto solo con CSS! 🙂

HTML:

 <div id="Note" name="Note">Example</div> 

CSS:

 div #Note { background-color:rgb(255,255,204) left: 0px; position: absolute; top: 0px; z-index: 999; } @media screen { body > div #Note { position: fixed; } } 

EDITAR: con varias notas (no probadas):

HTML:

 <div id="Note1">Example</div> <div id="Note2">Example</div> <div id="Note3">Example</div> <div id="Note4">Example</div> 

CSS:

 div #Note1 { background-color:rgb(255,255,204) left: 0px; height: 20px; position: absolute; top: 0px; z-index: 999; } div #Note2 { background-color:rgb(255,255,204) left: 0px; height: 20px; position: absolute; top: 20px; z-index: 999; } div #Note3 { background-color:rgb(255,255,204) left: 0px; height: 20px; position: absolute; top: 40px; z-index: 999; } div #Note4 { background-color:rgb(255,255,204) left: 0px; height: 20px; position: absolute; top: 60px; z-index: 999; } @media screen { body > div #Note1 { position: fixed; } body > div #Note2 { position: fixed; } body > div #Note3 { position: fixed; } body > div #Note4 { position: fixed; } } 
 function position( document.getElementsByName('Note')[0]) { var left = 0, top = 0; do { left += elem.offsetLeft-elem.scrollLeft; top += elem.offsetTop-elem.scrollTop; } while ( elem = elem.offsetParent ); return [ left, top ]; } 

Reste las posiciones de desplazamiento.

Solución:

  <script>function showDiv() { var div = document.getElementById('comdiv'); var button = document.getElementById('button'); if (div.style.display !== "none") { div.style.display = "none"; button.value = "Add Comments"; } else { button.value = "Hide Comments"; div.style.display = "block"; } var note = document.getElementsByName("comment")[0]; var screenPosition = note.getBoundingClientRect(); window.scrollTo(screenPosition); }</script> <form name="form" id="form" action="" method="post"> <textarea name="comment" id="comment" placeholder="Write Comment, Max: 140 characters" rows="4" class="width-50" onblur="checkMe()" ></textarea> <input type="text" class="input-small width-33" name="name" id="name" placeholder="Name" autofocus class="width-33" onblur="checkMe()" /> <button type="submit" name="submit" id="submitbutton" class="btn btn-green btn-outline" disabled="disabled">Post Comment</button> </form> 
  • Cómo contar palabras seleccionadas en cuerpo HTML por JavaScript
  • Agregar una cadena de botones a un campo HTML usando JavaScript
  • El mejor lugar para insert JavaScript dentro de un documento HTML
  • El espacio libre borra todo el elemento del tramo
  • ¿Habilita el desplazamiento en un solo div?
  • Ventana emergente cuando se hace clic en un enlace
  • Establezca el cursor de input en la position correcta después de javascript regex
  • canvas html5 - ¿Cómo puedo estirar text?
  • Cómo crear una barra de desplazamiento personalizada en un div (estilo de Facebook)
  • cómo mostrar div en el mouseover en el button desactivado
  • ¿Cómo convertir HTML seleccionado a Json?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.