Como saber la posición de la pagina

Lanix_0 · #1 (**permalink**) 09/06/2011, 18:09

HOla que tal a todos!!!

hoy tengo una duda.
he visto que en algunas paginas que parecen saber la posición que el usuario esta visualizando y ejecuta una acción.

por ejemplo (una pagina muy concurrida) en facebook al inicio te muestra la información reciente, y si tu bas bajando hace una consulta y muestra datos mas anteriores me supongo que es ajax, en lo que me gustaría que me ayudaran es en saber en que momento llega al fin de la pagina o a una determinada posición de la pagina.

muchas gracias

los tutos son vien venidos

Naahuel · #2 (**permalink**) 09/06/2011, 19:04

Mirá este ejemplo que te muestra el scroll vertical de una página: http://jsbin.com/orodi5

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
  <script>
    function _verScroll(){
  document.getElementById('escribe_aca').innerHTML = document.body.scrollTop;
}
    </script>
<style>
  #escribe_aca{position:fixed; top:0; background:yellow;padding:5px;}
  </style>
</head>
  <body onscroll="_verScroll()">
  <div style="height:3000px">
    <p>...</p>
    <p>Div con mucha altura solo para demostración</p>
    <p>Mueve el scroll --&gt;</p>
  </div>
  <p id="escribe_aca">0</p>
</body>
</html>

Es sólo un ejemplo, pero deberías investigar. Eso no funciona en IE :)

Lanix_0 · #3 (**permalink**) 09/06/2011, 19:11

Cita:

Iniciado por Naahuel

Mirá este ejemplo que te muestra el scroll vertical de una página: [URL="http://jsbin.com/orodi5"]http://jsbin.com/orodi5[/URL]

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
  <script>
    function _verScroll(){
  document.getElementById('escribe_aca').innerHTML = document.body.scrollTop;
}
    </script>
<style>
  #escribe_aca{position:fixed; top:0; background:yellow;padding:5px;}
  </style>
</head>
  <body onscroll="_verScroll()">
  <div style="height:3000px">
    <p>...</p>
    <p>Div con mucha altura solo para demostración</p>
    <p>Mueve el scroll --&gt;</p>
  </div>
  <p id="escribe_aca">0</p>
</body>
</html>

Es sólo un ejemplo, pero deberías investigar. Eso no funciona en IE :)

Muchas Gracias justo lo que buscaba gracias pero ahora como se hara en IE

pero en chrome si funciona muy bien

InKarC · #4 (**permalink**) 09/06/2011, 23:49

En jQuery

Código Javascript:

Ver original$(window).scroll(function () { 
    $("#numero").html($(window).scrollTop());
})

http://jsbin.com/upiye4/2

Panino5001 · #5 (**permalink**) 10/06/2011, 06:02

Así funcionaría en cualquier navegador:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento sin título</title>

<script type="text/javascript">

onscroll=function(){

    var yScroll=self.pageYOffset || (document.documentElement.scrollTop+document.body.scrollTop);

    document.getElementById('pp').innerHTML=yScroll;

}

</script>

 
</head>

 
<body>

<div id="pp" style="position:fixed;">0</div>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

.

</body>

</html>

Lanix_0 · #6 (**permalink**) 10/06/2011, 07:29

Cita:

Iniciado por InKarC

En jQuery

Código Javascript:

Ver original$(window).scroll(function () { 
    $("#numero").html($(window).scrollTop());
})

[url]http://jsbin.com/upiye4/2[/url]

Perfecto Gracias por lo que veo tengo que agregar e jquery verdad

https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

y desoues la funcion verdad me parece bien tambien justo lo que buscaba gracias

Lanix_0 · #7 (**permalink**) 10/06/2011, 07:41

Muchas Gracias

excelente ejemplo gracias a todos todos funcionan como esperaba muchas gracias

saludos

Lanix_0 · #8 (**permalink**) 10/06/2011, 16:34

Cita:

Iniciado por Panino5001

Así funcionaría en cualquier navegador:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento sin título</title>

<script type="text/javascript">

onscroll=function(){

    var yScroll=self.pageYOffset || (document.documentElement.scrollTop+document.body.scrollTop);

    document.getElementById('pp').innerHTML=yScroll;

}

</script>

 
</head>

 
<body>

<div id="pp" style="position:fixed;">0</div>

<br />

 
</body>

</html>

Solo por ultimo me podrias decir que es lo que hiciste

por lo que yo entiendo creas una variable que contenga la funcion y ahi haces todo pero me podrias explicar por que es ¿?

Muchas gracias

Panino5001 · #9 (**permalink**) 11/06/2011, 00:07

En realidad, onscroll es lo mismo que window.onscroll (es decir, un evento). Lo que hice es asignarle al evento onscroll una referencia a una función anónima para que, cuando cambie la posición del scroll, se ejecute dicha función.

Lanix_0 · #10 (**permalink**) 11/06/2011, 05:01

Cita:

Iniciado por Panino5001

En realidad, onscroll es lo mismo que window.onscroll (es decir, un evento). Lo que hice es asignarle al evento onscroll una referencia a una función anónima para que, cuando cambie la posición del scroll, se ejecute dicha función.

oooo perfecto pero una ultima duda lo que esta dentro de la funcion que hace

muchas grcias saludos