Código de JQuery - Mantener siempre visible el menú en la parte superior al hacer scroll con html5 y jquery

Versión 1
estrellaestrellaestrellaestrellaestrella(3)

Publicado el 18 de Diciembre del 2013gráfica de visualizaciones de la versión: Versión 1
24.435 visualizaciones desde el 18 de Diciembre del 2013
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver un ejemplo aquí
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!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>



Comentarios sobre la versión: Versión 1 (3)

FRANCISCO JAVIER GARCIA GARCIA
11 de Octubre del 2014
estrellaestrellaestrellaestrellaestrella
muy bien explicado. gracias
Responder
anahi
28 de Febrero del 2017
estrellaestrellaestrellaestrellaestrella
Gracias, gracias, gracias! Me ha servido mucho!!!!!!!!!!!!!!!!!!!!!!!!!!!
Responder
Alberto
15 de Agosto del 2017
estrellaestrellaestrellaestrellaestrella
De todos los ejemplos que vi este fue el mejor.
Gracias!
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2564