0

Cordial saludo.

Me estoy adentrando al mundo del frontend (HTML+Js+CSS+Bootstrap+Jquery)

Y tengo el siguiente codigo:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>LoQueSeaMi</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="FelipedelosH" />
    <!-- Incluir Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <!-- Incluir Bootstrap JS y dependencias de Popper.js -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="banner">
    <div class="row">
        <img class="img-fluid" src="https://github.com/felipedelosh/AFE-PORTFOLIO/raw/main/assets/img/banner/banner.jpg" alt="img relleno">
    </div>
  </div>
  <div class="navbar bg-danger text-white">
    <p class="h2">Esto es un navbar</p>
  </div>
  <div class="content">
    <p class="h1 text_insert">$</p>
    <script>
        for (var i = 0; i < 20; i++) {
            $('.text_insert').append("<p>Texto</p><br>");
        }
    </script>
  </div>
  <div class="footer bg-dark text-white">
    <p class="h1">Esto es el fooer</p>
  </div>
  <!-- core  -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>

Y tengo la siguiente duda (No tengo ni la mínima idea de como hacerlo):

Si yo tengo un menu navbar que va después de una imagen de portada como hago para que se quede pegado en la parte superior de la pantalla una vez que este fue tocado por la parte superior de la pantalla, y que al momento de seguir haciendo scroll este siga pegado a la parte superior?

  • Nota: si yo vuelvo a subir el navbar no sube hasta la cima de la pagina.

Estos son los mockups de ejemplo:

01

02

03

Esta es la plantilla de ejemplo:

Navbar en fulanito

Alguien podría ayudarme a hacerlo?

1 -> Eso se hace con jquery (o con otra cosa)? y con que método?
2 -> Como se detectan esos eventos de que un div tocó la parte superior de la pantalla?
3 -> Alguien me podría regalar el codigo?

Muchas gracias... agradecería que alguien me ayude.

1 respuesta 1

1

Hay dos formas de hacerlo, puedes hacerlo con CSS puro de esta manera:

.navbar{
  position: sticky; /*posición fija*/
  top: -1; /*distancia superior*/
  z-index: 1; /*posiciona el elemento sobre los demás*/
}

Pero estas usando Bootstrap, por lo que tienes que agregar la clase sticky-top en tu elemento navbar para que al pasar el scroll lo detecte y fije el elemento.

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <title>LoQueSeaMi</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="FelipedelosH" />
  <!-- Incluir Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <!-- Incluir Bootstrap JS y dependencias de Popper.js -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="banner">
    <div class="row">
      <img class="img-fluid" src="https://github.com/felipedelosh/AFE-PORTFOLIO/raw/main/assets/img/banner/banner.jpg" alt="img relleno">
    </div>
  </div>
  <div class="navbar bg-danger text-white sticky-top">
    <p class="h2">Esto es un navbar</p>
  </div>
  <div class="content">
    <p class="h1 text_insert">$</p>
    <script>
      for (var i = 0; i < 20; i++) {
        $('.text_insert').append("<p>Texto</p><br>");
      }
    </script>
  </div>
  <div class="footer bg-dark text-white">
    <p class="h1">Esto es el fooer</p>
  </div>
  <!-- core  -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>

</html>

Puedes buscar mas en la documentacion oficial de Bootstrap Position.

Dime si es lo que buscas.

2
  • Hola, si es lo que busco. Pero yo tengo otras dudas? ud como aprendió eso? osea eso lo enseñan en algún curso o como llego a esa información xq yo me la pase toda la mañana googleando. Commented el 23 ago. 2023 a las 0:56
  • 1
    Hola @AndresFelipeHernandez, la mayor parte de las cosas que se, han sido autodidactas, investigando un poco y empezando por lo mas básico, en este caso para entender la funcionalidad de bootstrap requiere que se tenga en conocimiento básico en CSS y HTML y también por consecuencia darle una leída a las documentaciones oficiales. Así comenzamos todos, mucha suerte. Commented el 23 ago. 2023 a las 16:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.