2

estoy teniendo un problema y es que al hacer un header fijo me encuentro con que el resto del texto de la página se monta encima de la cabecera y resulta muy molesto porque no consigo resolverlo.

body{

    background: fixed;
}

#container-cabecera{
    margin-top: 10px;
}

    #cabecera{
        position: fixed;
        width: 100%;
        background-color: red;
        min-width: 200px;
    }

/* Esto lo estoy cambiando, no prestar atencion */
#intro{
    min-width: 200px;
    max-width: 1500px;
}

#extra{
    min-width: 200px;
    max-width: 1200px;
}
<!DOCTYPE html>
<html>
    <head>
        <title>RabiGames</title>
        <meta charset="utf-8"/>

        <!-- jQuery v1.11.1-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

        <!-- Bootstrap v4.4.1 -->
        <link rel="stylesheet"                 href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
            integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
            crossorigin="anonymous"></script>

        <!-- Archivos locales -->
        <link rel="stylesheet" type="text/css" href="./css/estilos.css" />
        <script type="text/javascript" src="./js/movimientos.js"></script>
    </head>

    <body>
        <!-- Cabecera fija de la pagina, debe mantenerse intacta y el cuerpo de la página debe pasar            por debajo de la cabecera -->
        <div class="container-fluid" id="container-cabecera">
            <div class="row" id="cabecera">
                <div class="col-sm">
                    RabiGames1
                </div>
                <div class="col-sm">
                    RabiGames2
                </div>
                <div class="col-sm">
                    RabiGames3
                </div>
            </div>
        </div>
        <!-- Cuerpo de la página que debe pasar por ddebajo de la cabecera -->
        <div class="container">
            <div class="row">
                <div class="col-sm-9" id="intro">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor 
                        justo non urna molestie, vitae lobortis dui fermentum. Morbi sed 
                        aliquam nibh. Cras a purus lorem. Maecenas sit amet lorem tincidunt, 
                        lobortis ipsum vel, rhoncus diam. Duis dapibus quis massa eu auctor. 
                        Nam ut diam mattis, luctus quam quis, porta nunc. In nec sagittis 
                        orci, non facilisis ipsum. Vestibulum ante ipsum primis in faucibus 
                        orci luctus et ultrices posuere cubilia curae; Suspendisse blandit, 
                        risus sit amet congue sollicitudin, quam eros ultricies sapien, maximus 
                        convallis lectus metus in libero. Etiam odio nibh, facilisis sit amet 
                        aliquam nec, hendrerit id nunc. Interdum et malesuada fames ac ante 
                        ipsum primis in faucibus. Nam vitae aliquet erat, et auctor neque.</p>
                </div>
                <div class="col-sm-3" id="extra">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor 
                        justo non urna molestie, vitae lobortis dui fermentum. Morbi sed 
                        aliquam nibh. Cras a purus lorem. Maecenas sit amet lorem tincidunt, 
                        lobortis ipsum vel, rhoncus diam. Duis dapibus quis massa eu auctor. 
                        Nam ut diam mattis, luctus quam quis, porta nunc. In nec sagittis 
                        orci, non facilisis ipsum. Vestibulum ante ipsum primis in faucibus 
                        orci luctus et ultrices posuere cubilia curae; Suspendisse blandit, 
                        risus sit amet congue sollicitudin, quam eros ultricies sapien, maximus 
                        convallis lectus metus in libero. Etiam odio nibh, facilisis sit amet 
                        aliquam nec, hendrerit id nunc. Interdum et malesuada fames ac ante 
                        ipsum primis in faucibus. Nam vitae aliquet erat, et auctor neque.</p>
                </div>
            </div>
        </div>       
    </body>
</html>

Como podéis ver se me sube encima de la parte roja y no tengo mucha idea de cómo hacer para que no lo haga. Lo que he pensado es en hacer que en la zona del texto de la página tenga un espacio en blanco en funcion de lo grande que sea él header pero me parece una solución muy cutre.

De antemano, gracias por la ayuda.

5
  • Tendrías que cambiar la transparencia de la cabecera para evitar dicho comportamiento. ¿Podrías aclarar el resultado deseado? ¿Porqué no usas la clase sticky-top de Bootstrap? el 27 jul. 2020 a las 17:22
  • No uso sticky-top porque mi intencion con la cabecera es que se vea continuamente mientras me desplazo por la página. Y respecto a lo de la transparencia, en principio el header tiene un color específico y entiendo que no debería ser transparente, ¿no?
    – DonRabisa
    el 27 jul. 2020 a las 17:26
  • 1
    Tienes razón, entonces puedes usar fixed-top, con esto el elemento queda fijo en la posición superior de la página, mientras te desplazas por ella. el 27 jul. 2020 a las 17:29
  • Es verdad!! Se me olvidaba que existia eso en bootstrap pero ahora está el problema de que el contenido se pone por debajo de la cabecera al principio de la página... :( ¿Crees que está bien el usar varios espacios en blanco para que no pase?
    – DonRabisa
    el 27 jul. 2020 a las 17:36
  • Ya está, ya lo he solucionado, que tonto soy. Bastaba con añadir un margin-top. Muchas gracias por la ayuda.
    – DonRabisa
    el 27 jul. 2020 a las 17:57

1 respuesta 1

2

body{

    background: fixed;
}

/* Cabecera */
#fixed-cabecera{
    margin-top: 0px;
}

    #cabecera{
        width: 100%;
        background-color: red;
        min-width: 200px;
    }

/* Cuerpo de la página */
.container{
    margin-top: 5%;
}
     #intro{
        min-width: 200px;
        max-width: 1500px;
    }

    #extra{
        min-width: 200px;
        max-width: 1200px;
    }
<!DOCTYPE html>
<html>
    <head>
        <title>RabiGames</title>
        <meta charset="utf-8"/>

        <!-- jQuery v1.11.1-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

        <!-- Bootstrap v4.4.1 -->
        <link rel="stylesheet"                 href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
            integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
            crossorigin="anonymous"></script>

        <!-- Archivos locales -->
        <link rel="stylesheet" type="text/css" href="./css/estilos.css" />
        <script type="text/javascript" src="./js/movimientos.js"></script>
    </head>

    <body>
        <!-- Cabecera fija de la pagina, debe mantenerse intacta y el cuerpo de la página debe pasar            por debajo de la cabecera -->
        <div class="fexid-top" id="fixed-cabecera">
            <div class="row" id="cabecera">
                <div class="col-sm">
                    RabiGames1
                </div>
                <div class="col-sm">
                    RabiGames2
                </div>
                <div class="col-sm">
                    RabiGames3
                </div>
            </div>
        </div>
        <!-- Cuerpo de la página que debe pasar por ddebajo de la cabecera -->
        <div class="container">
            <div class="row">
                <div class="col-sm-9" id="intro">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor 
                        justo non urna molestie, vitae lobortis dui fermentum. Morbi sed 
                        aliquam nibh. Cras a purus lorem. Maecenas sit amet lorem tincidunt, 
                        lobortis ipsum vel, rhoncus diam. Duis dapibus quis massa eu auctor. 
                        Nam ut diam mattis, luctus quam quis, porta nunc. In nec sagittis 
                        orci, non facilisis ipsum. Vestibulum ante ipsum primis in faucibus 
                        orci luctus et ultrices posuere cubilia curae; Suspendisse blandit, 
                        risus sit amet congue sollicitudin, quam eros ultricies sapien, maximus 
                        convallis lectus metus in libero. Etiam odio nibh, facilisis sit amet 
                        aliquam nec, hendrerit id nunc. Interdum et malesuada fames ac ante 
                        ipsum primis in faucibus. Nam vitae aliquet erat, et auctor neque.</p>
                </div>
                <div class="col-sm-3" id="extra">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor 
                        justo non urna molestie, vitae lobortis dui fermentum. Morbi sed 
                        aliquam nibh. Cras a purus lorem. Maecenas sit amet lorem tincidunt, 
                        lobortis ipsum vel, rhoncus diam. Duis dapibus quis massa eu auctor. 
                        Nam ut diam mattis, luctus quam quis, porta nunc. In nec sagittis 
                        orci, non facilisis ipsum. Vestibulum ante ipsum primis in faucibus 
                        orci luctus et ultrices posuere cubilia curae; Suspendisse blandit, 
                        risus sit amet congue sollicitudin, quam eros ultricies sapien, maximus 
                        convallis lectus metus in libero. Etiam odio nibh, facilisis sit amet 
                        aliquam nec, hendrerit id nunc. Interdum et malesuada fames ac ante 
                        ipsum primis in faucibus. Nam vitae aliquet erat, et auctor neque.</p>
                </div>
            </div>
        </div>       
    </body>
</html>

Añadir simplemente un fixed-top de la librería bootstrap y retocar la posición con CSS. Para que el contenido de la página no se quede debajo de la cabecera simplemente se le añader un margin-top del porcentaje o tamaño que se quiera.

Gracias a Mauricio Contreras por la ayuda.

2
  • Vuelvo a preguntar: si estás usando Bootstrap, ¿porqué no usas sus clases? Escribes el CSS para establecer margin-top: 0, cuando puedes usar la clase mt-0 como clase aplicada directamente sobre el elemento. Saludos el 28 jul. 2020 a las 8:34
  • No conocía esa clase, estoy empezando y en boosttrap y no lo tengo todo leido. Gracias por la informacion, tendré que revisar mas a fondo la documentacion de bootstrap
    – DonRabisa
    el 29 jul. 2020 a las 9:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.