Ver Mensaje Individual
  #7 (permalink)  
Antiguo 09/07/2012, 04:51
congrio7
 
Fecha de Ingreso: noviembre-2005
Mensajes: 172
Antigüedad: 19 años
Puntos: 1
Respuesta: como detectar que el scroll del navegador está en el top (o casi en el top

Muchas gracias a todos!.


Cita:
Iniciado por furoya Ver Mensaje
Sí. Esos son los problemas de usar código ajeno. Y más de usarlo sin entender cómo funcionan.
Probablemente sea fácil de arreglar, pero lo cierto es que si no tienes cargada la "librería" desde antes para alguna otra cosa, usar jquery para saber la posición del escroll es un despropósito.
Se puede hacer perfectamente con JS. Y le das el alcance que quieras, como para que apoye o no interfiera con el CSS.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">

<script type="text/javascript"> 
var altura;

onload = function(){ 
altura = document.body.clientHeight-window.innerHeight;
}

onscroll = function(){ 
	var despl=self.pageYOffset || (document.documentElement.scrollTop + document.body.scrollTop); 

	document.title = despl+" "+altura; 

	if(despl + 50 > altura){ //se puede jugar con el 50
document.getElementById("boton").style.visibility = "visible";
document.body.style.backgroundColor = "lime";}
	else {
document.getElementById("boton").style.visibility = "hidden";
document.body.style.backgroundColor = "white";}
} 
</script> 

<style type="text/css">
#boton {margin-top: 2000px; margin-bottom: 100px; background-color: yellow; 
display: inline-block; opacity: .5; }

#boton:hover {opacity: 1;}
</style>
</head>
<body>
<div name="marca" id="marca">INICIO </div>
<br>
<a href="#marca" id="boton">ARRIBA ↑</a>
</body>
</html>
Este ejemplo está sólo a modo de muestra. Creo que no anda en IE, y el método del ancla para subir la página no es de lo más moderno. Pero insisto, es un ejemplo para mostrar lo ridículo que es meter un yaicuery para algo tan elemental. Los valores se los cambias a tu gusto.

Aunque pensándolo un poco, es raro que te inhabilite el hover. ¿No habrá otro error en alguna parte?.
Este lo he probado (una pequeña modificacion) y va bien, pero le pasa lo mismo. Cuando esta visible no varia al ocurrir el hover.

Cita:
<script type="text/javascript">
// JS particular de cada pagina


onscroll = function(){
var despl=self.pageYOffset || (document.documentElement.scrollTop + document.body.scrollTop);



if(despl > 2000){ //se puede jugar con el 50
document.getElementById("totop").style.opacity = "0.3";
}
else {
document.getElementById("totop").style.opacity = "0";
}
}
</script>

El estilo del #totop es este por cierto:
Cita:
#totop{
position:fixed;
top:0.7em;
right:1.3em;
width:40px;
text-align:right;
font-size:11px;
opacity:0.3;
-webkit-transition:opacity 0.2s ease;
-moz-transition:opacity 0.2s ease;
-o-transition:opacity 0.2s ease;
transition:opacity 0.2s ease;
}

#totop:hover{
opacity:1;
-webkit-transition:opacity 1s ease;
-moz-transition:opacity 1s ease;
-o-transition:opacity 1s ease;
transition:opacity 1s ease;
}