6

Estoy tratando de hacer un sitio web partiendo de esta plantilla.Quite la parte de arriba dejando de cabecera, el carrusel de imágenes, y lo que viene a continuación es la barra de navegación. Quería que al hacer scroll se quedara fija en la parte de arriba. Tengo algún ejemplo anterior que me ayudaron con bootstrap, pero en este caso no se como hacerlo. No se si habrá forma de hacerlo sin bootstrap, o si debo agregar bootstrap para conseguirlo. Gracias. Este es el principio del código del body:

 <body class="page1" id="top">

<header>
  <!--<div class="container_12">
            <div class="grid_12">
                      <h1>
          <a href="index.html">
            <img src="images/milogo.jpg" alt="Your Happy Family">
          </a>
        </h1>  

    </div>
  </div> 
  <div class="clear"></div>-->
  <ul id="slippry">
    <li>
      <a href="#slide1"><img src="images/jardines/jardin1.jpg" alt="Le dejamos un jardin de ensueño."></a>
    </li>
    <li>
      <a href="#slide1"><img src="images/desbroces/desbroce-2.jpg" alt="Desbrozamos y limpiamos su finca."></a>
    </li>
    <li>
      <a href="#slide1"><img src="images/vallas/vallas.jpg" alt="Cercamos su finca con postes de madera."></a>
    </li>
  </ul>

Y la linea de la barra de navegación:

<nav class="horizontal-nav full-width horizontalNav-notprocessed">
2
  • 1
    Sería bueno que agregaras los estilos correspondientes a ese fragmento de código que has colocado Commented el 5 feb. 2018 a las 14:05
  • Hola @Camilo Vasquez ,Edite la pregunta, pero he probado a poner los estilos y no sale como en la plantilla que muestro Commented el 5 feb. 2018 a las 14:07

3 respuestas 3

7

Ya conseguí lo que estaba buscando un código bastante simple que aquí os dejo y espero sirva para otros y que encontré en esta página. Gracias por vuestro apoyo.

body, html{ margin:0; padding:0;}
.header{ border-top:1px solid white;background:white; color:#333; height:150px; width:100%; font-family: 'Lobster', cursive; text-align:center}
.menu{ height:80px; width:100%; background:#333; color:white; text-align:center}
.wrapper{ height:2000px; width:100%; padding-top:20px}

.fixed{position:fixed; top:0}
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
posicionarMenu();

$(window).scroll(function() {    
    posicionarMenu();
});

function posicionarMenu() {
    var altura_del_header = $('.header').outerHeight(true);
    var altura_del_menu = $('.menu').outerHeight(true);

    if ($(window).scrollTop() >= altura_del_header){
        $('.menu').addClass('fixed');
        $('.wrapper').css('margin-top', (altura_del_menu) + 'px');
    } else {
        $('.menu').removeClass('fixed');
        $('.wrapper').css('margin-top', '0');
    }
}

</script>
</head>
<body>
<div class="header">
	<h1>Tutorial mantener fijo el menú al hacer scroll mejorado</h1>
    <h2>Unai Calleja, Diseñador Web Freelance</h2>
</div>
<div class="menu">esto sería el menú con sus enlaces</div>
<div class="wrapper">wrapper, aquí va el contenido. HAZ SCROLL, VERÁS QUE NO HACE SALTO</div>
</body>
</html>

4

Para dejar algo fijo simplemente usa posición fija (fixed) y luego usa top (o bottom) y left (o right) para indicar la posición en la que quieres poner el elemento:

.body {
  width: 80%;
  height: 200vw;
  background-color: cyan;
  position: relative;
  
}

.body .fijada {
  position: fixed;
  width:30%;
  height: 30px;
  background-color: white;
  border: 1px solid black;
}

.top-left {
  top:0;
  left:0;
}

.center {
  top:45vh;
  left:40vw;
}

.bottom-right {
 bottom:0;
 right:0;
}
<div class="body">
  
  <p> Fondo </p>
  <p> Fondo </p>
  <p> Fondo </p>
  <p> Fondo </p>
  <p> Fondo </p>
<div>

<nav class="fijada top-left">
    <p> Fijada 1</p>
</nav>

<nav class="fijada center">
    <p> Fijada 2 </p>
</nav>

<nav class="fijada bottom-right">
    <p> Fijada 3</p>
</nav>

Si lo quieres hacer usando bootstrap, entonces simplemente añade la clase fixed-top, como indica la documentación, a tu elemento, algo como lo siguiente

<nav class="navbar fixed-top">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>
1
  • Gracias @Pablo Lozano voy a probar tu ejemplo, a ver si la dejo fija cuando la barra de navegación llegue a la parte de arriba haciendo scroll. Aunque quizás me convendría agregar Bootstrap. Vamos que se quede fija al llegar arriba Commented el 5 feb. 2018 a las 14:52
2

Tienes en css la propiedad position:fixed que te mantiene el elemento fijado. Para establecerlo en una posición, se lo has de indicar con las prodiedades top, bottom, left y right. hay un tutorial que lo enseña bastante bien: Aqui

Si te fijas, utiliza la regla:

.navbar {
    overflow: hidden;
    background-color: #333;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
}

Donde la posicion esta fijada en el Top: 0

5
  • Lo que estoy tratando @Txema Alment es de que la barra esta en mitad de pantalla y cuando llegue arriba haciendo scroll, quede fija, no lo conseguí con tu ejemplo. Gracias. Commented el 5 feb. 2018 a las 15:17
  • 2
    Entiendo, he encontrado este enlace. Creo que te puede ayudar
    – Txmx
    Commented el 5 feb. 2018 a las 15:57
  • 1
    Gracias @Txema Alment, como veras me conteste yo con un ejemplo que encontre , pero si pones tu comentario como respuesta en vez de comentario, lo daria por respuesta. Commented el 5 feb. 2018 a las 16:07
  • 1
    Puedo modificar mi comentario para ayudar. Pero ni mucho menos como respuesta, que mejor que el que ha tenido el problema haya encontrado una solución satisfactoria.
    – Txmx
    Commented el 5 feb. 2018 a las 16:11
  • Vale, eso ya no se como sera, pero lo importante es apoyo mostrado. Gracias. Commented el 5 feb. 2018 a las 16:12

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.