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>
<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 }); });