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

$(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

4687
Visitas

1
Resp

Por pablo hace 10 años

Master

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 10 años

Admin