1

Tengo un problema que todavía no pudo resolver ninguna pregunta ya hecha en Stack.

Tengo un Sticky header que hace un salto cuando me muevo y no puedo encontrar una solución. Es decir, hago un poco de scroll y me salta unos 100px (por decir un ejemplo).

Mi idea es que el movimiento sea totalmente fluido sin ningún salto extraño.

Tengan en cuenta que el "botón categorías" al dar clic muestra varias cosas, y no pretendo que la solución superponga otros elementos que hay debajo (como una respuesta de un usuario que propone envolver todo el header en un div y agregarle un height como el del header)

Les dejo un snippet simple para que vean lo que sucede:

/*=============================================
ENCABEZADO
=============================================*/

$("#btnCategorias").click(function(){

	if(window.matchMedia("(max-width:767px)").matches){

		$("#btnCategorias").after($("#categorias").slideToggle("fast"));

	}else{

		$("#encabezado").after($("#categorias").slideToggle("fast"));

	}
		
})

/*=============================================
HEADER FIJO
=============================================*/

// When the user scrolls the page, execute myFunction 
window.onscroll = function() {myFunction()};

// Get the header
var header = document.getElementById("myHeader");

// Get the offset position of the navbar
var sticky = header.offsetTop;

// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
/*=============================================
TOP
=============================================*/

#top ul{
	padding-top:8px;
}

#top ul li{
	display:inline;
	line-height:30px;
	margin:0px 5px;
	color:white;
}

.registro ul{
	text-align: left;
	font-size:16px;
}

/*=============================================
HEADER
=============================================*/

header {

	background-color: #FFFFFF;
	z-index: 1000;
}

header #btnCategorias{
	margin:20px 0;
	cursor: pointer;
}

header #btnCategorias p{
	line-height:46px;
	margin-bottom:0px;
	font-size: 15px;
}

header #categorias{
	display:none;
	margin-top:-10px;
	position: relative;
	padding-bottom:20px;
}

header #categorias h4{
	margin-top:20px;
	margin-bottom:-10px;
}

header #categorias hr{
	border:1px solid rgba(255,255,255,.3);
}

/*=============================================
STICKY HEADER 
=============================================*/

.sticky {

	/*background: #F8F8F8;*/
	-webkit-box-shadow: 0 6px 6px -6px #222;
  	-moz-box-shadow: 0 6px 6px -6px #222;
  	box-shadow: 0 6px 6px -6px #222;
	position: fixed;
	top: 0px;
	width: 100%;
	/*animation: smoothScroll 1s forwards;*/

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--=====================================
TOP
======================================-->

<div class="container-fluid barraSuperior" id="top">
	
	<div class="container">
		
		<div class="row">

			<!--=====================================
			REGISTRO
			======================================-->

			<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 registro">
				
				<ul>
					
					<li><a href="#modalIngreso" data-toggle="modal">Ingresar</a></li>
					<li>|</li>
					<li><a href="#modalRegistro" data-toggle="modal">Crear una cuenta</a></li>

				</ul>

			</div>	

		</div>	

	</div>

</div>

<header class="container-fluid" id="myHeader">
	
	<div class="container">
		
		<div class="row" id="encabezado">

			<!--=====================================
			BLOQUE CATEGORÍAS Y BUSCADOR
			======================================-->

			<div class="col-lg-6 col-md-6 col-sm-8 col-xs-12">
					
				<!--=====================================
				BOTÓN CATEGORÍAS
				======================================-->

				<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 backColor" id="btnCategorias">
					
					<p>CATEGORÍAS
					
						<span class="pull-right">
							<i class="fa fa-bars" aria-hidden="true"></i>
						</span>
					
					</p>

				</div>

		<!--=====================================
		CATEGORÍAS
		======================================-->

		<div class="col-xs-12 backColor" id="categorias">
			
			<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">
				
				<h4>
					<a href="#" class="pixelCategorias">Lorem Ipsum</a>
				</h4>
				
				<hr>

				<ul>
					
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
								
				</ul>

			</div>	

			<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">
				
				<h4>
					<a href="#" class="pixelCategorias">Lorem Ipsum</a>
				</h4>
				
				<hr>

				<ul>
					
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
								
				</ul>

			</div>	

			<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">
				
				<h4>
					<a href="#" class="pixelCategorias">Lorem Ipsum</a>
				</h4>
				
				<hr>

				<ul>
					
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
								
				</ul>

			</div>	

			<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">
				
				<h4>
					<a href="#" class="pixelCategorias">Lorem Ipsum</a>
				</h4>
				
				<hr>

				<ul>
					
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
								
				</ul>

			</div>	

		</div>

	</div>

</header>

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>
</div>

1 respuesta 1

2

/*=============================================
ENCABEZADO
=============================================*/

$("#btnCategorias").click(function(){

	if(window.matchMedia("(max-width:767px)").matches){

		$("#btnCategorias").after($("#categorias").slideToggle("fast"));

	}else{

		$("#encabezado").after($("#categorias").slideToggle("fast"));

	}
		
})

/*=============================================
HEADER FIJO
=============================================*/

// When the user scrolls the page, execute myFunction 
window.onscroll = function() {myFunction()};

// Get the header
var header = document.getElementById("myHeader");

// Get the offset position of the navbar
var sticky = header.offsetTop;

// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
/*=============================================
HEADER
=============================================*/

header {
  position: fixed;
  top: 0px;
  width: 100%;
	background-color: #FFFFFF;
	z-index: 1000;
}

header #btnCategorias{
	margin:20px 0;
	cursor: pointer;
}

header #btnCategorias p{
	line-height:46px;
	margin-bottom:0px;
	font-size: 15px;
}

header #categorias{
	display:none;
	margin-top:-10px;
	position: relative;
	padding-bottom:20px;
}

header #categorias h4{
	margin-top:20px;
	margin-bottom:-10px;
}

header #categorias hr{
	border:1px solid rgba(255,255,255,.3);
}

/*=============================================
STICKY HEADER 
=============================================*/

.sticky {

	/*background: #F8F8F8;*/
	-webkit-box-shadow: 0 6px 6px -6px #222;
  	-moz-box-shadow: 0 6px 6px -6px #222;
  	box-shadow: 0 6px 6px -6px #222;
	position: fixed;
	top: 0px;
	width: 100%;
	/*animation: smoothScroll 1s forwards;*/

}

/*=============================================
CONTENT 
=============================================*/

#content {
  margin-top: 90px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="container-fluid" id="myHeader">
	
	<div class="container">
		
		<div class="row" id="cabezote">

			<!--=====================================
			BLOQUE CATEGORÍAS Y BUSCADOR
			======================================-->

			<div class="col-lg-6 col-md-6 col-sm-8 col-xs-12">
					
				<!--=====================================
				BOTÓN CATEGORÍAS
				======================================-->

				<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 backColor" id="btnCategorias">
					
					<p>CATEGORÍAS
					
						<span class="pull-right">
							<i class="fa fa-bars" aria-hidden="true"></i>
						</span>
					
					</p>

				</div>

		<!--=====================================
		CATEGORÍAS
		======================================-->

		<div class="col-xs-12 backColor" id="categorias">
			
			<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">
				
				<h4>
					<a href="#" class="pixelCategorias">Lorem Ipsum</a>
				</h4>
				
				<hr>

				<ul>
					
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
								
				</ul>

			</div>	

			<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">
				
				<h4>
					<a href="#" class="pixelCategorias">Lorem Ipsum</a>
				</h4>
				
				<hr>

				<ul>
					
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
								
				</ul>

			</div>	

			<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">
				
				<h4>
					<a href="#" class="pixelCategorias">Lorem Ipsum</a>
				</h4>
				
				<hr>

				<ul>
					
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
								
				</ul>

			</div>	

			<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">
				
				<h4>
					<a href="#" class="pixelCategorias">Lorem Ipsum</a>
				</h4>
				
				<hr>

				<ul>
					
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
					<li><a href="#" class="pixelSubCategorias">Lorem Ipsum</a></li>
								
				</ul>

			</div>	

		</div>

	</div>

</header>

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>
</div>

El funcionamiento esperado para un Menú Sticky es ese. Comienza posicionado con un position: relative o similar (para que el menú ejerza su espacio y no se sobreponga al contenido que le sigue) y al hacer scroll se queda en position: fixed (donde deja de ejercer espacio y permites que el contenido que le sigue quede por debajo de él.)

El problema viene de que el paso de ejercer espacio al de no ejercerlo provoca, inevitablemente, esa impresión de salto.

Para solucionarlo lo que he hecho ha sido poner el menú directamente en position: fixed y para evitar que al ya no generar espacio el texto que le sigue quede por debajo de este, le he dado al elemento id="content" un margin-top.

10
  • Gracias por tu explicacion! Una pregunta más. Y si arriba del header tengo una barra que denomino "top", también debería colocarle un margin para que sea visible? Ya que haciendo esto, se pierde lo que hay arriba, quedando el header en la cima de la web. Commented el 18 ene. 2019 a las 13:32
  • El header lo he posicionado en fixed, por lo que ocurre lo mismo que con un position: absolute el elemento queda fuere del flujo normal de la web, no contemplando ni siendo contemplado por otros elementos del DOM. Lo posicioné arriba del todo con un top: 0px, lo que tendrías que hacer es posionarlo a un top: Xpx donde X es la altura que ocupa la barra que me comentas.
    – phpMyGuel
    Commented el 18 ene. 2019 a las 13:37
  • Correcto, es lo que intente hacer. El problema es que al hacer scroll, el header se mantiene fijo (generando un espacio de X) y una vez que sobrepaso el top, se posiciona correctamente arriba el header, borrando ese espacio generado. Y por otro lado, haciendo lo que comentas en tu publicacion, al hacer clic en el boton de categorias, lo que muestra tapa el content, y fijate que en mi snippet no lo tapa, sino que lo tira hacia abajo Commented el 18 ene. 2019 a las 13:44
  • Se podría añadir a la clase sticky el que vuelva a posicionarse a top: 0px pero volvería a dar la impresión de salto. La solución que te he dado no valdría teniendo contenido encima del menú y que este no se encuentre en fixed. Incluso me arriesgaría a decir que no existe una solución para eso. ¿Que tienes en esa barra a la que llamas "top"? Podrías hacerla fixed también.
    – phpMyGuel
    Commented el 18 ene. 2019 a las 13:49
  • Ahora edito mi snippet y verás lo que hay alli Commented el 18 ene. 2019 a las 13:56

Tu Respuesta

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

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