Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

Aporte menú fixed al hacer scroll

Muy buenas
les traigo un sencillo código que pueden incrementar en sus paginas web que es muy útil..
este código sirve para su MENU o cuya cosa que queres que cuando el usuario baja el menú o dicha <div> se haga FIXED osea flotante

ATENCIÓN: para poder hacer funcionar se necesitan incrementar jquery.js fundamental para hacer andar el código
espero que os sirva de ayuda

CSS
.head {
 position:fixed;
z-index:1000;
top:0;
/*max-width:1000px;*/
transition: background .15s;
left:0;
width:100%;
box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}
JS
$(document).ready(function(){
var altura = $('#header_ca').offset().top;
	
	$(window).on('scroll', function(){
		if ( $(window).scrollTop() > altura ){
			$('#header_ca').addClass('header_ca_fixed');
		$('#notificationContainer').addClass('notification_fixed');
		} else {
			$('#header_ca').removeClass('header_ca_fixed');
		}
	});
});

5
Puntos
1453
Visitas
1
Resp
Por pablo hace 36 meses
Experto
Respuesta #1
gracias por el aporte pablo! estaría bien que dejaras el html del menu para que pueda probarse mas facilmente, por ejemplo este menú fijo

copiar y para probar
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <title>Menu fijo en la parte superior</title>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <style>
        * {
            margin:0px;
        }
        header {
            position:fixed;
            background-color:#ccc;
            width:100%;
            z-index:10;
            height:80px;
        }
        header h1 {
            margin:0px;
            padding:5px 20px;
            overflow:hidden;
            height:37px;
        }
        nav {
            background-color:#ccc;
        }
        nav ul {
            list-style:none;
            padding:0px;
            margin:0px;
            height:30px;
            overflow:hidden;
        }
        nav ul li {
            float:left;
            padding:5px 10px;
            font-weight:bold;
        }
        nav ul li a {
            text-decoration:none;
            color:#00f;
        }
        content {display:block;}
        content p {padding:10px 5px;}
    </style>
    <script>
        $(document).ready(function(){
 
            // cada vez que se mueva el scroll del navegador se ejecutara
            // este evento
            $(document).scroll(function(){
 
                // si la posicion del scroll es superior a 55 pixels...
                if($(window).scrollTop()>45)
                {
                    // indicamos que el header tiene una posicion fija a -47 pixels
                    $("header").css({"position":"fixed", "top":-47});
                    // definimos el margen superior al contenido cuando queda fijado
                    $("content").css({"margin-top":80});
                }else{
                    $("header").css({"position":"inherit", "top":"inherit"});
                    $("content").css({"margin-top":0});
                }
            });
        });
    </script>
</head>
 
<body>
    <header>
        <h1>Menu fijo en la parte superior</h1>
        <nav>
            <ul>
                <li><a href="#">menu1</a></li>
                <li><a href="#">menu2</a></li>
                <li><a href="#">menu3</a></li>
                <li><a href="#">menu4</a></li>
                <li><a href="#">menu5</a></li>
                <li><a href="#">menu6</a></li>
            <ul>
        </nav>
    </header>
 
    <content>
        <p>contenido de ejemplo1</p>
        <p>contenido de ejemplo2</p>
        <p>contenido de ejemplo3</p>
        <p>contenido de ejemplo4</p>
        <p>contenido de ejemplo5</p>
        <p>contenido de ejemplo6</p>
        <p>contenido de ejemplo7</p>
        <p>contenido de ejemplo8</p>
        <p>contenido de ejemplo9</p>
        <p>contenido de ejemplo10</p>
        <p>contenido de ejemplo11</p>
        <p>contenido de ejemplo12</p>
        <p>contenido de ejemplo13</p>
        <p>contenido de ejemplo14</p>
        <p>contenido de ejemplo15</p>
        <p>contenido de ejemplo16</p>
        <p>contenido de ejemplo17</p>
        <p>contenido de ejemplo18</p>
        <p>contenido de ejemplo19</p>
        <p>contenido de ejemplo20</p>
        <p>contenido de ejemplo21</p>
        <p>contenido de ejemplo22</p>
        <p>...</p>
    </content>
</body>
</html>
Demo del menú
0
Puntos
Por alber hace 36 meses
Administrador
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate