JavaScript - Barra fija como hago scroll

 
Vista:
sin imagen de perfil
Val: 39
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Barra fija como hago scroll

Publicado por Francisco Daniel (43 intervenciones) el 15/09/2020 20:10:07
Hola amigos, alguno me podrìa decir porque este còdigo no me funciona:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// MENÚ FIJO
var windowHeight = $(window).height();
var barraAltura = $('.barra').innerHeight();
 
$(window).scroll(function() {
    var scroll = $(window).scrollTop();
 
    if(scroll > windowHeight) {
        $('.barra').addClass('fixed');
        $('body').css({'margin-top':barraAltura +'px'});
 
 
    } else {
        $('.barra').removeClass('fixed');
        $('body').css({'margin-top': '0px'});
 
 
    }
});

Lo que intento es que mi barra de navegación quede fija cuando llega al margen superior.

Muchas Gracias
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 joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Barra fija como hago scroll

Publicado por joel (895 intervenciones) el 16/09/2020 07:22:12
Hola Francisco, no me queda muy claro lo que quieres hacer...

Nos puedes comentar con mas detalle?

Me da la sensación que quieres que se mantenga el scroll de la pagina siempre arriba?
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
sin imagen de perfil
Val: 39
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Barra fija como hago scroll

Publicado por Francisco Daniel (43 intervenciones) el 16/09/2020 13:33:25
Hola Joel. Lo que intento hacer es lo siguiente: Tengo una barra de navegación que se encuentra por debajo de una imagen y de algunos textos. cuando el usuario hace scrol la comienza a subir y quiero que se quede fija en la parte superior de la ventana, es decir que no desaparezca, sino que se quede ahí.

Gracias por responder
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 joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Barra fija como hago scroll

Publicado por joel (895 intervenciones) el 16/09/2020 15:51:46
Ah, entiendo... quieres que un elemento siempre este visible aunque se mueva el scroll...

Eso se hace con estilos CSS... tienes que poner el elemento con position: fixed; y luego ponerlo en el lugar deseado con top, left, bottom, ... mira este simple ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
    <meta charset="UTF-8">
    <style>
    #el {
        position:fixed;
        top:20px;
    }
    </style>
</head>
<body>
 
<p>...</p><p>...</p><p>...</p>
 
<div id="el">hola</div>
 
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...<p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
 
</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
1
Comentar
Imágen de perfil de Lopez
Val: 39
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Barra fija como hago scroll

Publicado por Lopez (9 intervenciones) el 16/09/2020 17:45:46
Y solo sumar a la buena respuesta de Joel +1
Tu javascript no funciona creo por 2 cosas:

scroll(); Es una funcion reservada, y en la línea 6 de tu código se usa como nombre de variable.
Seguido, la comparacion en el If línea 8 podría ser así:

1
2
3
4
$(window).scroll(function () {
    var scrollme = $(window).scrollme();
 
    if (scrollme >= barraAltura - windowHeight){

También en el Css puedes usar la propiedad position con el valor sticky ,
que justamente fija un elemento al scroll.

Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Lopez
Val: 39
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Barra fija como hago scroll

Publicado por Lopez (9 intervenciones) el 17/09/2020 16:42:20
Un gusto poder haberte podido ayudar, bro.
Saludos!
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