3
Sorry for the confusing question, I’ll try to explain it better:
I’m making a website, and I’ve used pages that take up the entire screen, and center the content, one below the other. There is also a menu at the top, with 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 you have in html, which is where the page stops 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 give the scroll with the mouse the menu is not hidden.
<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, but 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>
It’s just a hint, and why don’t you "remove" the scroll? Since each page is 100% high/wide let it only navigate the Nav btns...
– hugocsl
It would be cool too! How can I do this ?
– Giovane Machado