Reduzir o tamanho do topo ao usar a barra de rolagem

Published in 8 de outubro de 2019 by


Muitos layouts possuem um topo grande, tornando um empecilho para fixá-los, pois irão ocupar grande parte da tela e acabar chamando muita atenção do usuário. Irei apresentar uma solução para esse problema, segue comigo nesse exemplo que eu fiz com o WordPress e caso você esteja utilizando outra estrutura de desenvolvimento, irá funcionar da mesma forma.

Vamos começar pela marcação HTML do nosso topo que fica no header.php:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo('charset'); ?>">
	<meta name="viewport" content="width=device-width">
	<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
	<header>
		<section class="menu-area">
			<div id="top" class="container-fluid">
				<div class="row align-items-center">

					<div class="col-md-5" align="center">
						<?php 
						if ( has_custom_logo() ) : ?>
							<div class="site-logo"><?php the_custom_logo(); ?></div>
						<?php 
						else:

							$blog_info = get_bloginfo( 'name' );
							if ( ! empty( $blog_info ) ) :
								if ( is_front_page() && is_home() ) : ?>
									<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
								<?php else : ?>
									<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
								<?php endif; 
							endif; 

						endif;?>
					</div>

					<div class="col-md-7" align="center">
						<nav class="menu">
							<?php 
							wp_nav_menu(
								array(
									'theme_location' => 'my_main_menu'
								)
							);
							 ?>
						</nav>
					</div>
				</div>
			</div>
		</section>
	</header>

Note o id=”top” no container-fluid, iremos trabalhar com ele no CSS e no jQuery, fazendo aparecer e sumir classes, bora para a prática!

$(function(){   
	var top = $('#top');   
	$(window).scroll(function () { 
		if ($(this).scrollTop() > 1) { 
			top.addClass('menu-fixo');
		} else { 
			top.removeClass('menu-fixo');
			top.addClass('menu-voltando');
		} 
	});  
});

A função JavaScript acima faz o seguinte, se o scroll for maior que 1, será adicionado uma classe chamada menu-fixo, caso contrário, irá sumir a classe menu-fixo e adicionar a classe menu-voltando.

No CSS as configurações são as seguintes:

#top{
    background-color: green;
    width: 100%;
    transition: .3s;
    position: fixed;
    top: 0;
    z-index: 99;
    transition: all .7s;
}
.menu-fixo {
    position: fixed;
    top: 0;
    z-index: 99;
    transition: all .7s;
}
.menu-fixo .site-logo img {
    width: 116px;
    transition: all .7s;
    margin: 5px 0px 10px 0px;
}
.menu-voltando {
    transition: all .7s;
}
.menu-voltando .site-logo img {
    transition: all .7s;
}
body{
    padding-top: 185px;
}

A lógica que utilizei foi diminuir e aumentar o logo do site, algumas informações devem ser alteradas nesse código CSS, como o tamanho que o logo deve ficar quando a classe menu-fixo aparecer e o padding-top do body.

Não deixe de comentar se deu certo!


Categories: Front-end

Tags: , ,

Leave a comment

Your email address will not be published.

*
*

6 + 11 =