Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » Hacer menú sticky o visible todo el rato en móvil

HTML - Hacer menú sticky o visible todo el rato en móvil

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 1
Ha aumentado 1 puesto en HTML (en relación al último mes)
Gráfica de HTML

Hacer menú sticky o visible todo el rato en móvil

Publicado por albertbarras (1 intervención) el 07/08/2019 18:10:16
Hola a todos, estoy desarrollando un portal con la plantilla GeneratePress de Wordpress y estoy poniendo muchísimo foco en la versión móvil. La mayoría del trafico de la web la captan a través de smartphones (más del 68%) por lo que estamos invirtiendo mucho tiempo en que sea lo más usable posible.

Una de las cosas que me está costando es hacer el menú móvil sticky, es decir, que sea visible todo el rato aunque haga scroll hacia abajo. ¿Sabéis a lo que me refiero?

He probado con la propiedad siguiente CSS:

position: -webkit-sticky; /* Safari */
position: sticky;

Pero creo que estoy haciendo algo mal porque ni para atrás me funciona. He puesto esa propiedad al div con class=main-navigation. Os dejo la web por si queréis pegarle un vistazo al código fuente: web

No sé si lo estoy haciendo con el DIV equivocado o algo así. También tengo la duda de que si le pongo esa propiedad (imaginemos que al DIV correcto), en la versión PC también quedaría sticky?? como haría para que solo se aplique un CSS en la versión móvil?

Perdonad tantas preguntas pero como veréis estoy bastante pez en esto de HTML y CSS.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Alejandro
Val: 247
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Hacer menú sticky o visible todo el rato en móvil

Publicado por Alejandro (102 intervenciones) el 08/08/2019 15:52:32
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
:O no conocía sticky para position.
Si tiene prefijos es porque es experimental, el efecto yo lo he hecho con javascript agregando un listener al scroll, cuando el scroll supera la posición cambio la clase css.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alejandro
Val: 247
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Hacer menú sticky o visible todo el rato en móvil

Publicado por Alejandro (102 intervenciones) el 08/08/2019 16:16:17
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
Aquí te dejo un ejemplo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<html>
	<head>
		<script>
			var sticky, stockyPos;
			window.onload = function(){
				sticky = document.getElementById("sticky");
				stickyPos = sticky.offsetTop;
				window.addEventListener('scroll',function(){
					if( document.body.scrollTop > stickyPos) {
						sticky.classList.add("sticky");
					} else {
						sticky.classList.remove("sticky");
					}
				});
			}
		</script>
		<style>
			nav{
				border:solid 1px;
			}
			.sticky{
				position:fixed;
				top:0px;
				left:0px;
				width:100%;
				height:20px;
				background-color:white;
			}
			.sticky + div {
				padding-top: 20px;
			}
		</style>
	</head>
 
	<body>
		<nav id="sticky">Sticky</nav>
		<div>
			Aquí algún texto
			<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 />
		</div>
	</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar