Sorry for the confusing question, I'll try to explain it better:
I'm making a website, and I've used pages that fill the entire screen, and they center the content, one below the other. There is also a menu at the top, with a transparent background. What I would like is for it to disappear while the page is being rolled, and only be fully visible in the correct positions (which would be the anchors in the html, which are where the page for when you click on the items as well).
This is the function that I use to give a temporary hide in the menu, but it works only when it is clicked on one of the menu items, if I scroll with the mouse the menu does not hide. >
<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>
I know there is an onscroll function, however when trying to use what I got was a flashing menu.
<!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>
