Desculpem a pergunta confusa, vou tentar explicar melhor:
Estou fazendo um site, e usei páginas que ocupassem toda a tela, e centralizam o conteúdo, uma abaixo da outra. Também há um menu no topo, com fundo transparente. O que eu gostaria é que ele desaparecesse enquanto a página estivesse sendo rolada, e só ficasse totalmente visível nas posições corretas (que seriam as âncoras que tem no html, que são onde a página para quando se clica nos itens também).
Essa é a função que eu uso para dar um hide temporário no menu, mas ela funciona só quando se é clicado em um dos itens do menu, se eu der o scroll com o mouse o menu não se esconde.
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".navbar-link").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 800);
$('header').hide('slow');
$('header').show('slow');
});
});
</script>
Eu sei que há uma função onscroll, porém ao tentar usar o que eu consegui foi um menu piscando.
<!DOCTYPE html>
{% load staticfiles %}
<html lang="pt-br">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'css/giositeapp.css' %}"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Text+Me+One" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Giovane Machado</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm p-4 navbar-dark fixed-top">
<a href="#home" class="navbar-link">home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Alterna navegação">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav flex-row ml-sm-auto d-sm-flex">
<ul class="navbar-nav">
<li class="navbar-link">
<a href="#portfolio" class="navbar-link">portfolio</a>
</li>
<li class="navbar-link">
<a href="#sobremim" class="navbar-link" >sobre mim</a>
</li>
<li class="navbar-link">
<a href="#blog" class="navbar-link">blog</a>
</li>
<li class="navbar-link">
<a href="#contato" class="navbar-link">faça contato</a>
</li>
</ul>
</ul>
</div>
</nav>
</header>
<div class="secao-1" id="home">
<div class="row-fluid justify-content-center">
<div class="jumbotron jumbotron-fluid text-center">
<div class="container">
<h1 class="display-1">ggg</h1>
<p class="lead"></p>
</div>
</div>
</div>
</div>
<div class="secao-port" id="portfolio">
<div class="row-fluid justify-content-center">
<div class="jumbotron jumbotron-fluid text-center">
<div class="container">
<h1 class="display-1">portfolio</h1>
<p class="lead">...</p>
</div>
</div>
</div>
</div>
<div class="secao-sobre-mim" id="sobremim">
<div class="row-fluid justify-content-center">
<div class="jumbotron jumbotron-fluid text-center">
<div class="container">
<h1 class="display-1">sobre mim</h1>
<p class="lead"></p>
</div>
</div>
</div>
</div>
<div class="secao-blog" id="blog">
<div class="row-fluid justify-content-center">
<div class="jumbotron jumbotron-fluid text-center">
<div class="container">
<h1 class="display-1">blog</h1>
<p class="lead">posts legais</p>
</div>
</div>
</div>
</div>
<footer class="footer text-center" id="contato">
<div class="container">
<div class="row-fluid justify-content-center">
<div class="jumbotron jumbotron-fluid text-center">
<div class="container">
<h1 class="display-1">contato</h1>
<div class="row justify-content-center">
<div class="col">
<i class="fab fa-linkedin" style="font-size: 86px;"></i>
</div>
<div class="col">
<i class="fab fa-github" style="font-size: 86px;"></i>
</div>
<div class="col">
<a><i class="fas fa-envelope" style="font-size: 86px;"></i></a>
</div>
<div class="col">
<i class="fab fa-whatsapp" style="font-size: 86px;"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".navbar-link").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 800);
$('header').hide('slow');
$('header').show('slow');
});
});
</script>
</body>
</html>