0

Hola ayer conseguí el modo de que mi barra de navegación quedará fija al llegar a la parte de arriba de la página. Bueno, conseguí la forma de hacerlo, pues por más pruebas que hice con uno y otro ejemplo, no encuentro la forma de agregarlo a mi código, conseguí que la barra se fije al llegar arriba, pero me estropea el carrusel de imagenes que ocupa la cabecera, y veo lo siguiente.
El código es extenso, por lo que no se como mostrar. Tengo un repositorio en GitHub por si pueden revisar y ayudarme con el problema. En dicho ejemplo el código para fijar la barra está comentado, por lo que se ve bien . Si hago efectivo cualquiera de los métodos se ve algo así

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

<head>
  <title>Casa</title>
  <meta charset="utf-8">
  <script src="js/modernizr.custom.17475.js"></script>
  <script>
    $(document).ready(function () {
      jQuery('#slippry').slippry()
    });
    function goToByScroll(id) { $('html,body').animate({ scrollTop: $("#" + id).offset().top }, 'slow'); }

  </script>

  <!-- Para la que la barra de navegacion quede fija 
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<style>
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_block{ height:80px; width:100%; background:white; color:white; text-align:center}
.wrapper{ height:2000px; width:100%; padding-top:20px}

.fixed{position:fixed; top:0}

</style>
<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_block').addClass('fixed');
        $('.wrapper').css('margin-top', (altura_del_menu) + 'px');
    } else {
        $('.menu_block').removeClass('fixed');
        $('.wrapper').css('margin-top', '0');
    }
}

</script> -->
</head>

<body class="page1" id="top">
  <!--==============================header=================================-->
  <header>

  <div class="header">
    <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>
  </div>

    <div class="menu_block" id="navi">
      <nav class="horizontal-nav full-width horizontalNav-notprocessed">
        <ul class="sf-menu">
          <li class="current">
            <a href="index.html">Casa</a>
          </li>
          <li>
            <a href="#">Sobre mi</a>
          </li>
          <li>
            <a href="#">Servicios</a>
          </li>
          <li>
            <a href="#">Nuestros precios</a>
          </li>
          <li>
            <a href="#">Contacto</a>
          </li>
        </ul>
      </nav>
      <div class="#"></div>
    </div>
  </header>
Tambien probe otra forma de hacerlo pero me distorsionaba las imágenes del carrusel

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

$(window).load(function(){ $("#header").sticky({ topSpacing: 0 }); });

Tambien probe el siguiente código, pero descolocaba las imágenes del carrusel:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

$(window).load(function(){ $("#header").sticky({ topSpacing: 0 }); });

2
  • 1
    Intenta utilizar el elemento Sticky de Semantic UI Commented el 6 feb. 2018 a las 16:19
  • Gracias @Victor Herasme Perez Ya lo he probado, de aqui pero no consigo que la cabecera se mantenga ocupando toda la pantalla. Commented el 6 feb. 2018 a las 16:36

1 respuesta 1

1

¿Esto es lo que buscas? Copia este código y pruébalo si quieres. El nav se queda arriba de la pantalla al hacer scroll (Menu Sticky).

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"/>
	<title> Ejemplo de Nav </title>
</head>

<body>
	<nav id="EjNav">
		Nav
	</nav>
	
	<article>
		Relleno y mas relleno <br/><br/><br/><br/><br/><br/>
		mas relleno <br/><br/><br/><br/><br/><br/><br/>
		mas relleno <br/><br/><br/><br/><br/><br/><br/>
		mas relleno <br/><br/><br/><br/><br/><br/><br/>
		mas relleno <br/><br/><br/><br/><br/><br/><br/>
		mas relleno <br/><br/><br/><br/><br/><br/><br/>
		mas relleno <br/><br/><br/><br/><br/><br/><br/>
		mas relleno <br/><br/><br/><br/><br/><br/><br/>
		mas relleno <br/><br/><br/><br/><br/><br/><br/>
		mas relleno <br/><br/><br/><br/><br/><br/><br/>
		mas relleno <br/><br/><br/><br/><br/><br/><br/>
		mas relleno <br/><br/><br/><br/><br/><br/><br/>
		mas relleno <br/><br/><br/><br/><br/><br/><br/>
		mas relleno <br/><br/><br/><br/><br/><br/><br/>
		mas relleno <br/><br/><br/><br/><br/><br/><br/>
		mas relleno <br/><br/><br/><br/><br/><br/><br/>
		demasiado relleno
	</article>
	
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		
		nav{
			position: absolute;
			width: 100%;
			height: 80px;
			z-index: 10;
			background: #333333;
			top: 80px;
			color: white;
		}
		
		article{
			position: absolute;
			width: 80%;
			left: 50%;
			margin-left: -40%;
			top: 220px;
			background: #C4C4C4;
		}
		
		.Paste{
			position: fixed;
			top: 0;
		}
	</style>
	
	<script type="text/javascript">
		window.onscroll = function(){
			AddOrRemove()
		};
		
		var Nav = document.getElementById("EjNav");
		var NavPosition = Nav.offsetTop;
		
		function AddOrRemove(){
			if(window.pageYOffset >= NavPosition){
				Nav.classList.add("Paste");
			}
			else{
				Nav.classList.remove("Paste");
			}
		}
	</script>
</body>
</html>

Es algo sencillo, sólo necesitas javascript para hacerlo y ya. Lo acabo de hacer ahorita rápido por eso está tan cutre jeje XD

Sólo necisitas agregar una clase:

.Paste{
	position: fixed;
	top: 0;
}

Que tendrá las propiedades que le agregará al nav cuando llegue hasta arriba. Por último la función de javascript, que se encargará de toda la magia XD.

//Cuando se mueva el scroll se ejecutará la función llamada addOrRemove
window.onscroll = function(){
			AddOrRemove()
		};
		
        //Obtenemos el id de la etiqueta nav
		var Nav = document.getElementById("EjNav");
        
        //Obtenemos la posición de desplazamiento
		var NavPosition = Nav.offsetTop;
		
        //Le agregamos y quitamos la clase Paste al nav
		function AddOrRemove(){
			if(window.pageYOffset >= NavPosition){
				Nav.classList.add("Paste");
			}
			else{
				Nav.classList.remove("Paste");
			}
		}

1
  • Gracias @Luis Gerardo tu propuesta funciona en parte, pues la barra no se fija cuando llega arriba, si no más tarde. No se que estoy haciendo mal, si quieres echar un vistazo al repositorio de Github, elimine archivos e imagenes para que pese menos. Si te fijas tengo otro codigo comentado en el <head>que funciona perfectamente, pero al usarlo deja pequeñas y sin función al carrusel de imágenes. Si tienes tiempo de revisarlo y encontrar el error... Commented el 7 feb. 2018 a las 9:53

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.