Reduzir o tamanho do topo ao usar a barra de rolagem
Publicado em 8 de outubro de 2019
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!
Categoria: Front-end