entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

0voto

Cabecera dinamica

Me estoy volviendo loco con este diseño.

Lo que quiero hacer es en principio fácil, la parte jQuery esta funcionando bien, lo que esta fallando es el CSS:

Se trata de que nada más entrar en la página web, carga una imagen a página completa, mostrando un titulo y una imagen con un filtro, hasta aquí bien, cuando bajas el scroll, la imagen (que no es más que la cabecera del site) cambia hasta transformarse en la pantalla superior una cabecera con 3 elementos:

A la izquierda una foto, en el centro el titulo de site y la derecha un pequeño menú de navegación, bueno pues esto ultimo no me esta funcionando, el posicionamiento de los elementos no esta funcionando como debería ser, a continuación pongo el código y al final un enlace a codepen para ver el código en acción.

HTML

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
  </head>
 <body>
<header>
<div id="fondo">
    <img src="http://img.archiexpo.es/images_ae/photo-g/51849-6881273.jpg">
    <div class="tapiz"></div>   
    <div class="titulo">
        <h1 id="nombre">Estudio Web</h1>
        <h3 id="pf">portafolio</h3> 
    </div>
</div>

<div id="cuadro">   
    <div id="foto" style="background-image: url('http://subcultura.es/webcomics/aaacomics/arte_1203.jpg');"></div>
</div> 

<div id="titulo">
</div>

<div id="menu">
</div>

<div id="titulo">
    <h1 id="nombre">Estudio Web</h1>
    <h3 id="pf">portafolio</h3>
</div>

<div id="menu">
    <ul>
        <li><h2><a href="yo.php" class="enlaceblanco" id="yo">Sobre mi</a></h2></li>
        <li><h2><a href="cv.php" class="enlaceblanco" id="cv1">CV</a></h2></li>
        <li><h2><a href="contacto.php" class="enlaceblanco" id="contact">Contacto</a></h2></li>
        <li><h2><a href="servidor.php" class="enlaceblanco" id="server">Server</a></h2></li>
    </ul>   
</div>

</header>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}

html, body {
    font-family: Helvetica, serif, sans-serif; 
    font-size: 14px;
    width: 100%;    
    box-sizing: content-box; 
    overflow-x: hidden;
}

html
{
    position: relative; 
    min-height: 100%;
}
body
{
    margin: 0 0 100px;
}

a:link, a:active, a:visited {
    color: black;
    text-decoration: none;
}

a[href^="https://"]:hover, 
a[href^="http://"]:hover {
    text-decoration: underline;
}
.enlaceblanco:link, 
.enlaceblanco:hover, 
.enlaceblanco:visited {
    color: white;
    text-decoration: none
}

header {
    position absolute;
    background-color: #367ABD;
    z-index: 999;
    width: 100%;    
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    overflow:show;  
}

header div#fondo {
    position: relative;
    top: 0;
   left: 0;

   text-align: center;   
}

header div#fondo img {
    z-index: 998;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;   
}

header div#fondo .tapiz {   
    position: absolute;
    background-color: rgba(54, 122, 189, 0.7);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
}

header div#fondo .titulo {
    position: absolute;
    width: 50%;
   height: 10%;

   text-align: right;
    vertical-align: middle;

    top: 40%;
    transform: translateY(50%);
   -webkit-transform: translateY(50%);
   -moz-transform: translateY(50%);
   -o-transform: translateY(50%); 
   -ms-transform: translateY(50%);

    left: 20%;

   transform: translateX(5%);
   -webkit-transform: translateX(5%);
   -moz-transform: translateX(5%);
   -o-transform: translateX(5%);    
   -ms-transform: translateX(5%)    
}

header div#fondo .titulo h1#nombre,
header div#fondo .titulo h3#pf {    
    font-family: 'Nunito', sans-serif;
    font-style: italic;
    color: #fff;
    letter-spacing: 3px;    
}

header div#fondo .titulo h1#nombre {
    font-size: 7rem;
}

header div#fondo .titulo h3#fs {
    font-size: 5rem;    
}

.header2 {
    height: 300px;
    min-height: 300px;  
    font-family: 'Roboto', Helvetica, serif, sans-serif; 
   font-weight: normal; 
   font-style: normal;
    color: #fff;    
    float: left;
}

// Foto

.header2 div#cuadro {
    z-index: 1001;  
    position: relative; 
    width: 30%; 
    min-width: 30%;
    height: 300px;
    min-height: 300px;

    text-align: center;
    vertical-align: middle;

    top: 5%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-5%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
   -ms-transform: translateY(-50%);  

    left: 50%;
    transform: translateX(50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(50%);
   -ms-transform: translateX(50%);  

}

.header2 div#cuadro div#foto {
    z-index: 1002;
    position: relative;
    width: 200px;
   height: 200px;

   background-position: 50%;
    -moz-border-radius: 50%;
    -wekit-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    border: 2px solid white;
    background-size: cover;
   background-repeat: no-repeat;    

  top: 5%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-5%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
   -ms-transform: translateY(-50%);  

    left: 50%;
    transform: translateX(50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(50%);
   -ms-transform: translateX(50%);  

}

// titulo

.header2 div#titulo { 
    position: relative; 
    width: 40%; 
    min-width: 40%;
    height: 300px;
    min-height: 300px;
    text-align: right;  
    float:left; 

    top: 50%;
    transform: translateY(-25%);
    -webkit-transform: translateY(-25%);
    -moz-transform: translateY(-25%);
    -o-transform: translateY(-25%);
   -ms-transform: translateY(-25%);  
}

.header2 div#titulo h1#nombre {
    font-size: 5rem;
}

.header2 div#titulo h3#fs {
    font-size: 3.5rem;  
}

// Menu

.header2 div#menu  {
    visibility: hidden;
    position: relative; 
    width: 30%;
    min-width: 30%;
    height: 300px;
    min-height: 300px;  
    vertical-align: middle;
    float:left;         
}

.header2 div#menu ul {
    position: relative;
    text-align: left;
    vertical-align: middle;

    left: 25%;
    transform: translateX(-25%);
    -webkit-transform: translateY(-25%);
    -moz-transform: translateY(-25%);
    -o-transform: translateY(-25%);
   -ms-transform: translateY(-25%);

   top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
   -ms-transform: translateY(-50%);     
}

.header2 div#menu ul li {
    padding-bottom: 3%;     
}

.header2 div#menu ul li h2 {
    font-size: 1.5rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 3px;        
}

jQuery

$(document).ready(function() {  

var clonemarco = $("div#cuadro").clone();

    $(window).scroll(function() {
        if( $(this).scrollTop() > 0 ){          
            $("div#fondo").remove();                                    
            $('header').addClass('header2');
            clonemarco.appendTo("header");                  
        } else {
        }
    });
});

Demo

1 Respuesta

1voto

Leonardo-Tadei Puntos227320

Hola @bichomen,

Yo la verdad es que no entiendo del todo cuál es la cosa a obtener :-(

Por lo pronto, es HTML inválido el tener IDs con el mismo nombre en un documento, si bien no parece ser este el error.

Por otra parte, encerrá los 3 DIV que querés alinear en otro DIV para que tengan un contenedor común, así poder posicionarlos con un float: left y un ancho del 33.33% (restando los bordes, si los hay)

Al final, no entiendo tampoco la idea detrás de clonar el elemento para agregarlo en JavaScript progrmáticamente, pero que además existan los elementos otra vez en el DOM: o están en el HTML, o los generás con JS, pero no las 2 cosas!

Saludos!

0voto

bichomen comentado

Yo la verdad es que no entiendo del todo cuál es la cosa a obtener :-(

El efecto ya esta conseguido, si ves la demo, el problema es el posicionamiento de los elementos.

¿Has probado a bajar el scroll vertical?

Al final, no entiendo tampoco la idea detrás de clonar el elemento para agregarlo en JavaScript progrmáticamente, pero que además existan los elementos otra vez en el DOM: o están en el HTML, o los generás con JS, pero no las 2 cosas!

Quizás aquí entiendas mejor lo que pretendo y el porque de la duplicidad de elementos, que no es duplicar, si no que se aplica una clase con unos estilos diferentes

Como hacer un header dinámico con HTML, CSS y Javascript

y mostrar unos elemento u otros según se desplace el scroll, muchas páginas modernas hoy en día tienen efectos visuales parecidos.

0voto

bichomen comentado

Por lo pronto, es HTML inválido el tener IDs con el mismo nombre en un documento, si bien no parece ser este el error.

Eso ha sido un error mio, ya estan eliminados.

Por otra parte, encerrá los 3 DIV que querés alinear en otro DIV para que tengan un contenedor común, así poder posicionarlos con un float: left y un ancho del 33.33% (restando los bordes, si los hay)

Bueno ese contenedor el el header, con la clase .header2, aun así he modificado el código para poner un div contenedor.

0voto

Leonardo-Tadei comentado

El efecto lo vi: lo que no me queda claro es cómo se deben ver los 3 DIV con el menú, la imagen y el texto. Por el CSS parece que ocupando un tercio de la pantalla cada uno, pero al no funcionar, no puedo estar seguro.

En el ejemplo que enlazás, no está el resto de la estructura HTML, solo la parte del header, y creo entender que tu problema es que luego los 3 DIV de abajo no se ven como corresponde, es decir, el problema no es en el header dinámico, sino en el resto de la página!

Si hiciste una versión que no tiene el error de los DIV con ID repetido, poné un enlace para verla y avanzamos sobre esa!

0voto

bichomen comentado

Bueno la disposición es sencilla, en el header,

  • La foto ha de quedar a la izquierda con un ancho de un 30% centrada verticalmente y horizontalmente dentro de su div contenedor #cuadrado.

  • El titulo estaría en el centro ocuparía un 40% también centrado, pero con la peculiaridad de que al tener un subtitulo, este ha de quedar alineado a la derecha junto con el titulo, pero centrado con respecto al div contenedor #titulo.

  • Por ultimo el menú estaría a la derecha, ocuparía un 30% y estaría centrado como la foto.

Todo el header tiene una altura de 300px que se aplica con la clase .header2

El código modificado y corregido lo puedes ver en Codepen, pero te lo pongo aquí también:

http://codepen.io/bichomen/pen/QpGGJj

HTML

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
  </head>
 <body>
<header>

<div id="fondo">
    <img src="http://img.archiexpo.es/images_ae/photo-g/51849-6881273.jpg">
    <div class="tapiz"></div>   
    <div class="titulo">
        <h1 id="nombre">Estudio Web</h1>
        <h3 id="pf">portafolio</h3> 
    </div>
</div>

<div id="contenedor">
  <div id="cuadro">     
      <div id="foto" style="background-image: url('http://subcultura.es/webcomics/aaacomics/arte_1203.jpg');"></div>
  </div> 

  <div id="titulo">
      <h1 id="nombre">Estudio Web</h1>
      <h3 id="pf">portafolio</h3>
  </div>

  <div id="menu">
      <ul>
          <li><h2><a href="yo.php" class="enlaceblanco" id="yo">Sobre mi</a></h2></li>
        <li><h2><a href="cv.php" class="enlaceblanco" id="cv1">CV</a></h2></li>
          <li><h2><a href="contacto.php" class="enlaceblanco" id="contact">Contacto</a></h2></li>
          <li><h2><a href="servidor.php" class="enlaceblanco" id="server">Server</a></h2></li>
      </ul> 
  </div>
</div>  

</header>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}

html, body {
    font-family: Helvetica, serif, sans-serif; 
    font-size: 14px;
    width: 100%;    
    box-sizing: content-box; 
    overflow-x: hidden;
}

html
{
    position: relative; 
    min-height: 100%;
}
body
{
    margin: 0 0 100px;
}

a:link, a:active, a:visited {
    color: black;
    text-decoration: none;
}

a[href^="https://"]:hover, 
a[href^="http://"]:hover {
    text-decoration: underline;
}
.enlaceblanco:link, 
.enlaceblanco:hover, 
.enlaceblanco:visited {
    color: white;
    text-decoration: none
}

header {
    position relative;
    background-color: #367ABD;
    z-index: 999;
    width: 100%;    
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    overflow:show;  
}

header div#fondo {
    position: relative;
    top: 0;
   left: 0;

   text-align: center;   
}

header div#fondo img {
    z-index: 998;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;   
}

header div#fondo .tapiz {   
    position: absolute;
    background-color: rgba(54, 122, 189, 0.7);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
}

header div#fondo .titulo {
    position: absolute;
    width: 50%;
   height: 10%;

   text-align: right;
    vertical-align: middle;

    top: 40%;
    transform: translateY(50%);
   -webkit-transform: translateY(50%);
   -moz-transform: translateY(50%);
   -o-transform: translateY(50%); 
   -ms-transform: translateY(50%);

    left: 20%;

   transform: translateX(5%);
   -webkit-transform: translateX(5%);
   -moz-transform: translateX(5%);
   -o-transform: translateX(5%);    
   -ms-transform: translateX(5%)    
}

header div#fondo .titulo h1#nombre,
header div#fondo .titulo h3#pf {    
    font-family: 'Nunito', sans-serif;
    font-style: italic;
    color: #fff;
    letter-spacing: 3px;    
}

header div#fondo .titulo h1#nombre {
    font-size: 7rem;
}

header div#fondo .titulo h3#fs {
    font-size: 5rem;    
}

.header2 {
    width: 100%;
    min-width: 100%;
    height: 300px;
    min-height: 300px;  
    font-family: 'Roboto', Helvetica, serif, sans-serif; 
   font-weight: normal; 
   font-style: normal;
    color: #fff;
}

.header2 div#contenedor {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;  
}

// Foto

.header2 div#contenedor div#cuadro {
    position: absolute; 
    width: 30%; 
    min-width: 30%;
    height: 100%;
    min-height: 100%;

    float: left;

    text-align: center;
    vertical-align: middle;   

    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
   -ms-transform: translateY(-50%);  

    left: 50%;
    transform: translateX(50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(50%);
   -ms-transform: translateX(50%);
}

.header2 div#contenedor div#cuadro div#foto {
   position: absolute;
    width: 200px;
   height: 200px;

   background-position: 50%;
    -moz-border-radius: 50%;
    -wekit-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    border: 2px solid white;
    background-size: cover;
   background-repeat: no-repeat;      

}

// titulo

.header2 div#contenedor div#titulo { 
    position: absolute; 
    width: 40%; 
    min-width: 40%;
    height: 100%;
    min-height: 100%;
    text-align: right; 

    float:left; 

    top: 50%;
    transform: translateY(-25%);
    -webkit-transform: translateY(-25%);
    -moz-transform: translateY(-25%);
    -o-transform: translateY(-25%);
   -ms-transform: translateY(-25%);  
}

.header2 div#contenedor div#titulo h1#nombre {
    font-size: 5rem;
}

.header2 div#contenedor div#titulo h3#fs {
    font-size: 3.5rem;  
}

// Menu

.header2 div#contenedor div#menu  {
    position: absolute; 
    width: 30%;
    min-width: 30%;
    height: 100%;
    min-height: 100%;  
    vertical-align: middle;

    float: left;         
}

.header2 div#contenedor div#menu ul {
    position: absolute;
    text-align: left;
    vertical-align: middle;

    left: 25%;
    transform: translateX(-25%);
    -webkit-transform: translateY(-25%);
    -moz-transform: translateY(-25%);
    -o-transform: translateY(-25%);
   -ms-transform: translateY(-25%);

   top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
   -ms-transform: translateY(-50%);     
}

.header2 div#contenedor div#menu ul li {
    padding-bottom: 3%;     
}

.header2 div#contenedor div#menu ul li h2 {
    font-size: 1.5rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 3px;        
}

jQuery

$(document).ready(function() {  

  $(window).scroll(function() {
        if( $(this).scrollTop() > 0 ){          
            $("div#fondo").remove();                        
            $('header').addClass('header2');        
        } else {
        }
    });
});

El resto del código no es necesario porque no se ve afectado, lo único que cambia es la cabecera.

0voto

bichomen comentado

Ahora me doy cuenta que borre el CSS en codepen por error, ya lo volví a poner

0voto

bichomen comentado

Bueno lo consegui, me costo pero lo he conseguido lo he probado tanto Firefox como en Chrome y ve bien, no se porque en el Codepen, el menú se me desplaza al centro, pero puesto en practica queda a la derecha, pongo el codigo:

HTM

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
  </head>
 <body>
<header>

<div id="fondo">
    <img src="http://img.archiexpo.es/images_ae/photo-g/51849-6881273.jpg">
    <div class="tapiz"></div>   
    <div class="titulo">
        <h1 id="nombre1">Estudio Web</h1>
        <h3 id="pf1">portafolio</h3>    
    </div>
</div>

<div id="contenedor">
  <div id="cuadro">     
      <div id="foto" style="background-image: url('http://subcultura.es/webcomics/aaacomics/arte_1203.jpg');"></div>
  </div> 

  <div id="titulo">
    <div id="texto">
        <h1 id="nombre">Estudio Web</h1>
        <h3 id="pf">portafolio</h3>
    <div>
  </div>

  <div id="menu">
      <ul>
          <li><h2><a href="yo.php" class="enlaceblanco" id="yo">Sobre mi</a></h2></li>
        <li><h2><a href="cv.php" class="enlaceblanco" id="cv1">CV</a></h2></li>
          <li><h2><a href="contacto.php" class="enlaceblanco" id="contact">Contacto</a></h2></li>
          <li><h2><a href="servidor.php" class="enlaceblanco" id="server">Server</a></h2></li>
      </ul> 
  </div>
</div>  

</header>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}

html, body {
    font-family: Helvetica, serif, sans-serif; 
    font-size: 14px;
    width: 100%;    
    box-sizing: content-box; 
    overflow-x: hidden;
}

html
{
    position: relative; 
    min-height: 100%;
}
body
{
    margin: 0 0 100px;
}

a:link, a:active, a:visited {
    color: black;
    text-decoration: none;
}

a[href^="https://"]:hover, 
a[href^="http://"]:hover {
    text-decoration: underline;
}
.enlaceblanco:link, 
.enlaceblanco:hover, 
.enlaceblanco:visited {
    color: white;
    text-decoration: none
}

header {
    position relative;
    background-color: #367ABD;
    z-index: 999;
    width: 100%;    
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    overflow:hidden;  
}

header div#fondo {
    position: relative;
    top: 0;
   left: 0;

   text-align: center;   
}

header div#fondo img {
    z-index: 998;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;   
}

header div#fondo .tapiz {   
    position: absolute;
    background-color: rgba(54, 122, 189, 0.7);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
}

header div#fondo .titulo {
    position: absolute;
    width: 50%;
   height: 10%;

   text-align: right;
    vertical-align: middle;

    top: 40%;
    transform: translateY(50%);
   -webkit-transform: translateY(50%);
   -moz-transform: translateY(50%);
   -o-transform: translateY(50%); 
   -ms-transform: translateY(50%);

    left: 20%;

   transform: translateX(5%);
   -webkit-transform: translateX(5%);
   -moz-transform: translateX(5%);
   -o-transform: translateX(5%);    
   -ms-transform: translateX(5%)    
}

header div#fondo .titulo h1#nombre1,
header div#fondo .titulo h3#pf1 {    
    font-family: 'Nunito', sans-serif;
    font-style: italic;
    color: #fff;
    letter-spacing: 3px;    
}

header div#fondo .titulo h1#nombre1 {
    font-size: 7rem;
}

header div#fondo .titulo h3#fs1 {
    font-size: 5rem;    
}

.header2 {
    position: relative;
   width: 100%;
   min-width: 100%;
   height: 300px;
   min-height: 300px;  
   font-family: 'Roboto', Helvetica, serif, sans-serif; 
   font-weight: normal; 
   font-style: normal;
   color: #fff;
}

.header2 div#contenedor {
  position: relative;
  margin: auto;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%; 
}

.header2 div#contenedor div#cuadro {
   position: relative; 
   width: 30%; 
   min-width: 30%;
   height: 100%;
   min-height: 100%;
    float: left; 
}

.header2 div#contenedor div#cuadro div#foto {
   position: relative;
   width: 200px;
   height: 200px;

    text-align: center;
   vertical-align: middle; 

   background-position: 50%;
    -moz-border-radius: 50%;
   -wekit-border-radius: 50%;
   -o-border-radius: 50%;
   -ms-border-radius: 50%;
   border-radius: 50%;
   border: 2px solid white;
   background-size: cover;
   background-repeat: no-repeat;   

   top: 50%;   
   left: 50%;
   transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
}

.header2 div#contenedor div#titulo { 
   position: relative; 
   width: 40%; 
   min-width: 40%;
   height: 100%;
   min-height: 100%; 
    float: left;
}

.header2 div#contenedor div#titulo div#texto {
    position: relative;

   text-align: right;
   vertical-align: middle; 

   top: 50%;   
   left: 50%;
   transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);  
}

.header2 div#contenedor div#titulo div#texto h1#nombre {
    font-size: 5rem;
}

.header2 div#contenedor div#titulo div#texto h3#fs {
    font-size: 3.5rem;  
}

.header2 div#contenedor div#menu  {
   position: relative; 
   width: 30%;
   min-width: 30%;
   height: 100%;
   min-height: 100%;    
   float: left; 
}

.header2 div#contenedor div#menu ul {
   position: relative;
   width: 50%;
   min-width: 50%;  

   text-align: center;
   vertical-align: middle; 

     top: 50%;   
   left: 50%;
   transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);    
}

.header2 div#contenedor div#menu ul li {
    padding-bottom: 3%;     
}

.header2 div#contenedor div#menu ul li h2 {
    font-size: 1.5rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 3px; 
    text-align: left;       
}

jQuery

$(document).ready(function() {  

  $(window).scroll(function() {
        if( $(this).scrollTop() > 0 ){          
            $("div#fondo").remove();                        
            $('header').addClass('header2');        
        } else {
        }
    });
});

Codigo en Codepen -->> http://codepen.io/bichomen/pen/QpGGJj

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta