3

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>
2
  • É só uma sugestão, e pq vc não "remove" o scroll? Já que cada página tem 100% de altura/largura deixe que ele navegue apenas pelos btns da nav...
    – hugocsl
    Commented 13/12/2018 às 12:20
  • Seria legal também! Como posso fazer isso ? Commented 13/12/2018 às 12:25

1 Resposta 1

2

Conforme conversado no comentário segue um exemplo onde o scroll fica limitado pelos cliques na Navbar. Assim o usuário não usaria o scroll apenas os btns já que cada página tem 100% da altura.

inserir a descrição da imagem aqui

Segue o código referente a imagem acima:

OBS: Aqui no Snippet vai apresentar um Erro de JS, depois vc tem que ver porque ele apresenta isso. Eu não mexi no seu script, apenas no CSS

<!DOCTYPE html>
<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>
<style> 
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.jumbotron {
  background-color: transparent !important ;
}
[class^="sec"] {
  height: 100vh;
}
[class^="sec"]:nth-child(even) {
  background-color: silver;
}
</style>
</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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .