¿Cómo arreglo este problema con una imágen en un Sticky Header (encabezado pegajoso)?

Tengo un problema al insertar una imágen en mi Sticky Header o Encabezado dinámico. Aquí se ve en el siguiente GIF:

Cuando estoy arriba de todo en la web, se encuentra bien el logo, pero cuando bajo, hago scroll y la imágen se tapa por la mitad. Pero sólo pasa con la imágen, porque al bajar, las letras se ajustan. Cómo podría solucionarlo? Gracias.

Códigos:

$(document).ready(function(){
 
	$(window).scroll(function(){
		if( $(this).scrollTop() > 0 ){
			$('header').addClass('header2');
		} else {
			$('header').removeClass('header2');
		}
	});
 
});
*{margin:0; padding:0;}

body {
	background:#fffffa;
}

header {
width:100%; /* Establecemos que el header abarque el 100% del documento */
overflow:hidden; /* Eliminamos errores de float */
background:#252932;
margin-bottom:20px;
}
 
.wrapper {
width:90%; /* Establecemos que el ancho sera del 90% */
max-width:1000px; /* Aqui le decimos que el ancho máximo sera de 1000px */
margin:auto; /* Centramos los elementos */
overflow:hidden; /* Eliminamos errores de float */
}
 
header .logo {
font-size:50px;
line-height:200px;
float:left;
}
 
header nav {
float:right;
line-height:200px;
}
 
header nav a {
display:inline-block;
color:#fff;
text-decoration:none;
padding:10px 20px;
line-height:normal;
font-size:20px;
font-weight:bold;
-webkit-transition:all 500ms ease;
-o-transition:all 500ms ease;
transition:all 500ms ease;
}
 
header nav a:hover {
background:#f56f3a;
border-radius:50px;
}

.header2 {
	position: fixed;
	height:100px;
}
 
.header2 .logo {
	line-height:100px;
	font-size:30px;
}
 
.header2 nav {
	line-height:100px;
}

.contenido {
	padding-top:100px;
}

.contenido p {
	margin-bottom:1em;
}

@media screen and (max-width: 950px) {
	header .logo,
	header nav {
		width:100%;
		text-align:center; /*Centramos el menu y el logotipo*/
		line-height:100px;
	}
 
	.header2 {
		height:auto;
	}
 
	.header2 .logo,
	.header2 nav {
		line-height:50px;
	}
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="estilos.css">
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="header.js"></script>
</head>
<body>
	<header class="header2">
		<div class="wrapper">
			<div class="logo">
				<img src="http://i.imgur.com/DKG7QCr.png" alt="">
			</div>
			<nav>
				<a href="#">Inicio</a>
				<a href="#">Foro</a>
				<a href="#">Tienda</a>
				<a href="#">Votar</a>
				<a href="#">Soporte</a>
			</nav>
		</div>
	</header>

	<section class="contenido wrapper">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse reiciendis quod libero soluta non laborum quasi ipsam inventore consectetur vel mollitia, quae quam enim molestiae dicta, possimus rerum, dolorem ipsum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse reiciendis quod libero soluta non laborum quasi ipsam inventore consectetur vel mollitia, quae quam enim molestiae dicta, possimus rerum, dolorem ipsum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse reiciendis quod libero soluta non laborum quasi ipsam inventore consectetur vel mollitia, quae quam enim molestiae dicta, possimus rerum, dolorem ipsum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse reiciendis quod libero soluta non laborum quasi ipsam inventore consectetur vel mollitia, quae quam enim molestiae dicta, possimus rerum, dolorem ipsum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse reiciendis quod libero soluta non laborum quasi ipsam inventore consectetur vel mollitia, quae quam enim molestiae dicta, possimus rerum, dolorem ipsum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse reiciendis quod libero soluta non laborum quasi ipsam inventore consectetur vel mollitia, quae quam enim molestiae dicta, possimus rerum, dolorem ipsum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse reiciendis quod libero soluta non laborum quasi ipsam inventore consectetur vel mollitia, quae quam enim molestiae dicta, possimus rerum, dolorem ipsum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse reiciendis quod libero soluta non laborum quasi ipsam inventore consectetur vel mollitia, quae quam enim molestiae dicta, possimus rerum, dolorem ipsum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse reiciendis quod libero soluta non laborum quasi ipsam inventore consectetur vel mollitia, quae quam enim molestiae dicta, possimus rerum, dolorem ipsum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse reiciendis quod libero soluta non laborum quasi ipsam inventore consectetur vel mollitia, quae quam enim molestiae dicta, possimus rerum, dolorem ipsum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse reiciendis quod libero soluta non laborum quasi ipsam inventore consectetur vel mollitia, quae quam enim molestiae dicta, possimus rerum, dolorem ipsum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse reiciendis quod libero soluta non laborum quasi ipsam inventore consectetur vel mollitia, quae quam enim molestiae dicta, possimus rerum, dolorem ipsum.</p>
	</section>
</body>
</html>
0
задан 23.12.2016, 22:57
0 ответов

Ты используешь font-size чтобы давать размер твоему изображению png, с чем оно не функционирует, ты был бы должен использовать height или width.

Твой код:

HTML

<div class="logo">
  <img src="http://i.imgur.com/DKG7QCr.png" alt="">
</div>

CSS

header .logo {
   font-size:50px;
   ^^^^^^^^^^^^^^
   line-height:200px;
   float:left;
}

.header2 .logo {
    line-height:100px;
    font-size:30px;
    ^^^^^^^^^^^^^^
}

Могло бы оставаться нечто похожее:

header .wrapper .logo img {
    height:50px;
    line-height:200px;
    float:left;
}

.header2 .wrapper .logo img {
    line-height:100px;
    height:30px;

}

Ящик .logo если ты хочешь, ты мог бы удалять ее, и прямо ты даешь стиль изображению .header2 .wrapper img

Я оставляю тебе полный пример, как он мог бы оставаться:

CSS

*{margin:0; padding:0;}

body {
    background:#fffffa;
}

.header {
width:100%; /* Establecemos que el header abarque el 100% del documento */
overflow:hidden; /* Eliminamos errores de float */
background:#252932;
height: 200px; line-height: 200px;
}

.wrapper {
width:90%; /* Establecemos que el ancho sera del 90% */
max-width:1000px; /* Aqui le decimos que el ancho máximo sera de 1000px */
margin:auto; /* Centramos los elementos */
overflow:hidden; /* Eliminamos errores de float */
}

.header img {
height: 200px;
float:left;
}

.header nav {
float:right;
}

.header nav a {
display:inline-block;
color:#fff;
text-decoration:none;
padding:10px 20px;
line-height:normal;
font-size:20px;
font-weight:bold;
-webkit-transition:all 500ms ease;
-o-transition:all 500ms ease;
transition:all 500ms ease;
}

.header nav a:hover {
background:#f56f3a;
border-radius:50px;
}

.header2 {
    position: fixed;
    height:100px; line-height: 100px;
}

.header2 img {  
    height: 100px;
}

.contenido {
    padding-top:100px;
}

.contenido p {
    margin-bottom:1em;
}

@media screen and (max-width: 950px) {
    .header img,
    .header nav {
        width:100%;
        text-align:center; /*Centramos el menu y el logotipo*/
        line-height:100px;
    }

    .header,.header2 {
        height:auto;
    }

    .header2 img,
    .header2 nav {
        line-height:50px;
    }
}

HTML

<header class="header">
        <div class="wrapper">

            <img src="http://i.imgur.com/DKG7QCr.png" alt="">

            <nav>
                <a href="#">Inicio</a>
                <a href="#">Foro</a>
                <a href="#">Tienda</a>
                <a href="#">Votar</a>
                <a href="#">Soporte</a>
            </nav>
        </div>
    </header>

    <section class="contenido wrapper">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse reiciendis quod libero soluta non laborum quasi ipsam inventore consectetur vel mollitia, quae quam enim molestiae dicta, possimus rerum, dolorem.</p>        
    </section>
1
ответ дан 03.12.2019, 17:59
  • 1
    Привет @D.Bulten, добрый вечер. Вводя эти có digos acambio, которых я tení в, уменьшается imá ген i.gyazo.com/40ae74c946efc4f901e4b7b2c189f1ba.gif –  23.12.2016, 23:47
  • 2
    30px действительно это tamañ или очень pequeñ или, я поместил эту стоимость в, как твои font-size, но как ты можешь видеть, сейчас, меняется ли tamañ или изображения, когда ты делаешь scroll, хотя ты будешь должен упорядочивать немного CSS, стоимость, и т.д. –  24.12.2016, 00:03
  • 3
    Ты añ adido полный пример, во-первых, ты не должен añ adir твой собственный class =" header2" в тебе HTML и я существую añ adido средства в header с line-height, так как - ящик отец изображения и меню, которое ты хочешь сориентировать. –  24.12.2016, 00:29
  • 4
    Стой, muchí пропасти спасибо! Сейчас sí видят хорошо. Но сейчас у меня есть другая проблема, что я предполагаю, что он из-за со стороны có я говорю JS. Когда я загружаю Веб уже, у меня появляется header как будто он загрузился, и я должен загружаться и подниматься для того, чтобы появилась posició n инициал. Serí в así: i.gyazo.com/4eb5bfabc8cb183e6a1283a268169f2c.gif –  24.12.2016, 00:39
  • 5
    Ahh muchí пропасти спасибо! С этим có я говорю CSS, которого ты оставил мне сейчас sí функционируй совсем правильно. Большое спасибо из-за всего D.Bulten! Увидимся! –  24.12.2016, 00:41

Я начался бы из-за того, что издал бы изображение, чтобы мочь работать хорошо с нею: сними все место в мишени, которая есть около logo в самом .gif: 66px из-за правой стороны, 39px кверху, 40px из-за правой стороны и 50px из-за внизу. Так ты можешь контролировать хорошо размер и края logo с кода.

Espacio en blanco de la imagen

Это является самим местом в мишени изображения (в желтом) то, что поддерживает ее внизу. Есть способы, чтобы это налаживать с кода, но более легко издавать изображение и иметь хорошее сырье, чтобы работать.

1
ответ дан 03.12.2019, 17:59
  • 1
    Привет @MarioZ. Спасибо за твою помощь! Уже мне удалось решить проблему, что tení в. Привет! –  24.12.2016, 00:45