entre Desarrolladores

Question

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

Answer 1

1 Respuestas

bichomen · Answer 2 · 2017-03-08T04:22:47+0000

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!

respondido por Leonardo-Tadei (227.320 puntos) Mar 8, 2017

0voto

bichomen comentado Mar 8, 2017

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.

comentado por bichomen (2.770 puntos) Mar 8, 2017

0voto

bichomen comentado Mar 8, 2017

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.

comentado por bichomen (2.770 puntos) Mar 8, 2017

0voto

Leonardo-Tadei comentado Mar 8, 2017

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!

comentado por Leonardo-Tadei (227.320 puntos) Mar 8, 2017

0voto

bichomen comentado Mar 8, 2017

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.

comentado por bichomen (2.770 puntos) Mar 8, 2017

editado por bichomen Mar 8, 2017

0voto

bichomen comentado Mar 9, 2017

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

comentado por bichomen (2.770 puntos) Mar 9, 2017

0voto

bichomen comentado Mar 9, 2017

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

comentado por bichomen (2.770 puntos) Mar 9, 2017

Pregunta

Cabecera dinamica

Por favor, accede o regístrate para añadir un comentario.

1 Respuesta

bichomen comentado Mar 8, 2017

bichomen comentado Mar 8, 2017

Leonardo-Tadei comentado Mar 8, 2017

bichomen comentado Mar 8, 2017

bichomen comentado Mar 9, 2017

bichomen comentado Mar 9, 2017

Por favor, accede o regístrate para añadir un comentario.

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

En el blog

Otras Preguntas y Respuestas

Sin Respuesta

Preguntas relacionadas

Actividad Reciente

alyvrs preguntó Oct 19

ManHol preguntó Jul 9

ArtEze respondió Abr 24

ArtEze seleccionó una respuesta Abr 24

ArtEze respondió Abr 24

ArtEze preguntó Abr 24

ArtEze respondió Abr 24

ArtEze respondió Abr 24

ArtEze comentó Abr 24

Santiago2610 comentó Mar 23

Ultimas Preguntas

alyvrs preguntó

ManHol preguntó

ArtEze preguntó

Santiago2610 preguntó

gonzalss preguntó

ParkJo preguntó

ovedg preguntó

Ehdez preguntó

pedrourday preguntó

pedrourday preguntó

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

Etiquetas

Categorías

Conecta