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

Imágen de perfil

Mantener siempre visible el menú en la parte superior al hacer scroll con html5 y jquerygráfica de visualizaciones


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 18 de Diciembre del 2013 por Xavi
15.645 visualizaciones desde el 18 de Diciembre del 2013. Una media de 105 por semana
Código que muestra como mantener siempre visible un menú en la parte superior de la pantalla al hacer un scroll.

Versión 1
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 18 de Diciembre del 2013gráfica de visualizaciones de la versión: Versión 1
15.646 visualizaciones desde el 18 de Diciembre del 2013. Una media de 105 por semana
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 (1)

FRANCISCO JAVIER GARCIA GARCIA
11 de Octubre del 2014
estrellaestrellaestrellaestrellaestrella
muy bien explicado. gracias
Responder

Comentar la versión: Versión 1

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

http://lwp-l.com/s2564