Skip to main content
Formatação aperfeiçoada e correções gramaticais
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Primeiro para para esse efeito ser válido seria interessante você deixar seu menu sempre fixo no topo da página. Para isso precisa usar a classe .fixed-top na navbar (veja na documentação oficial).

Depois como um jQuery simples (o jQuery já faz parte do Bootstrap então não tem problema usá-lo) é possível fazer um fadeOut e fadeIn no evento scroll.

Para ver o resultado veja o exemplo abaixo. Deixei comentado o lugar onde você controla a "distância" do scroll antes da logo sumir.

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 140) { // 140 é a distancia que vc rola antes da logo sumir
    $("#brand-image").fadeOut();
  } else {
    $("#brand-image").fadeIn();
  }
});
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
  <a class="navbar-brand" href="#">
    <img id="brand-image" alt="Website Logo" src="https://placecage.com/50/50" />
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

<div style="height:1000px; width: 100ps;"></div>

Primeiro para para esse efeito ser válido seria interessante você deixar seu menu sempre fixo no topo da página. Para isso precisa usar a classe .fixed-top na navbar (veja na documentação).

Depois como um jQuery simples (o jQuery já faz parte do Bootstrap então não tem problema usá-lo) é possível fazer um fadeOut e fadeIn no evento scroll.

Para ver o resultado veja o exemplo abaixo. Deixei comentado o lugar onde você controla a "distância" do scroll antes da logo sumir.

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 140) { // 140 é a distancia que vc rola antes da logo sumir
    $("#brand-image").fadeOut();
  } else {
    $("#brand-image").fadeIn();
  }
});
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
  <a class="navbar-brand" href="#">
    <img id="brand-image" alt="Website Logo" src="https://placecage.com/50/50" />
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

<div style="height:1000px; width: 100ps;"></div>

Primeiro para para esse efeito ser válido seria interessante você deixar seu menu sempre fixo no topo da página. Para isso precisa usar a classe .fixed-top na navbar (veja na documentação oficial).

Depois como um jQuery simples (o jQuery já faz parte do Bootstrap então não tem problema usá-lo) é possível fazer um fadeOut e fadeIn no evento scroll.

Para ver o resultado veja o exemplo abaixo. Deixei comentado o lugar onde você controla a "distância" do scroll antes da logo sumir.

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 140) { // 140 é a distancia que vc rola antes da logo sumir
    $("#brand-image").fadeOut();
  } else {
    $("#brand-image").fadeIn();
  }
});
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
  <a class="navbar-brand" href="#">
    <img id="brand-image" alt="Website Logo" src="https://placecage.com/50/50" />
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

<div style="height:1000px; width: 100ps;"></div>

Primeiro para para esse efeito ser válido seria interessante vcvocê deixar seu menu sempre fixo no topo da página. Para isso vc precisa usar a classe .fixed-top na navbar como vc pode ver(veja na documentação oficial https://getbootstrap.com/docs/4.0/components/navbar/#placementdocumentação).

Depois como um jQuery simples (o jQuery já faz parte do BSBootstrap então não tem problema usausá-lo) vc fazé possível fazer um fadeOut e fadeIn no evento scroll.

Para ver o resultado veja o exemplo abaixo. Deixei comentado o lugar onde vcvocê controla a "distancia""distância" do scroll antes da logo sumir.

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 140) { // 140 é a distancia que vc rola antes da logo sumir
        $("#brand-image").fadeOut();
    } else {
        $("#brand-image").fadeIn();
    }
});
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
        <a class="navbar-brand" href="#">
            <img id="brand-image" alt="Website Logo" src="https://placecage.com/50/50" />
        </a>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                    <a class="nav-item nav-link" href="#">Features</a>
                        <a class="nav-item nav-link" href="#">Pricing</a>
                             <a class="nav-item nav-link disabled" href="#">Disabled</a>
            </div>
        </div>
    </nav>

    <div style="height:1000px; width: 100ps;"></div>
    

Primeiro para para esse efeito ser válido seria interessante vc deixar seu menu sempre fixo no topo da página. Para isso vc precisa usar a classe .fixed-top na navbar como vc pode ver na documentação oficial https://getbootstrap.com/docs/4.0/components/navbar/#placement

Depois como um jQuery simples (o jQuery já faz parte do BS então não tem problema usa-lo) vc faz um fadeOut e fadeIn no evento scroll

Para ver o resultado veja o exemplo abaixo. Deixei comentado o lugar onde vc controla a "distancia" do scroll antes da logo sumir

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 140) { // 140 é a distancia que vc rola antes da logo sumir
        $("#brand-image").fadeOut();
    } else {
        $("#brand-image").fadeIn();
    }
});
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
        <a class="navbar-brand" href="#">
            <img id="brand-image" alt="Website Logo" src="https://placecage.com/50/50"/>
        </a>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                    <a class="nav-item nav-link" href="#">Features</a>
                        <a class="nav-item nav-link" href="#">Pricing</a>
                             <a class="nav-item nav-link disabled" href="#">Disabled</a>
            </div>
        </div>
    </nav>

    <div style="height:1000px; width: 100ps;"></div>
    

Primeiro para para esse efeito ser válido seria interessante você deixar seu menu sempre fixo no topo da página. Para isso precisa usar a classe .fixed-top na navbar (veja na documentação).

Depois como um jQuery simples (o jQuery já faz parte do Bootstrap então não tem problema usá-lo) é possível fazer um fadeOut e fadeIn no evento scroll.

Para ver o resultado veja o exemplo abaixo. Deixei comentado o lugar onde você controla a "distância" do scroll antes da logo sumir.

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 140) { // 140 é a distancia que vc rola antes da logo sumir
    $("#brand-image").fadeOut();
  } else {
    $("#brand-image").fadeIn();
  }
});
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
  <a class="navbar-brand" href="#">
    <img id="brand-image" alt="Website Logo" src="https://placecage.com/50/50" />
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

<div style="height:1000px; width: 100ps;"></div>
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Primeiro para para esse efeito ser válido seria interessante vc deixar seu menu sempre fixo no topo da página. Para isso vc precisa usar a classe .fixed-top na navbar como vc pode ver na documentação oficial https://getbootstrap.com/docs/4.0/components/navbar/#placement

Depois como um jQuery simples (o jQuery já faz parte do BS então não tem problema usa-lo) vc faz um fadeOut e fadeIn no evento scroll

Para ver o resultado veja o exemplo abaixo. Deixei comentado o lugar onde vc controla a "distancia" do scroll antes da logo sumir

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 140) { // 140 é a distancia que vc rola antes da logo sumir
        $("#brand-image").fadeOut();
    } else {
        $("#brand-image").fadeIn();
    }
});
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
        <a class="navbar-brand" href="#">
            <img id="brand-image" alt="Website Logo" src="https://placecage.com/50/50"/>
        </a>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                    <a class="nav-item nav-link" href="#">Features</a>
                        <a class="nav-item nav-link" href="#">Pricing</a>
                             <a class="nav-item nav-link disabled" href="#">Disabled</a>
            </div>
        </div>
    </nav>

    <div style="height:1000px; width: 100ps;"></div>