0

Boa tarde,

Como eu faço pra minha pagina iniciar com a navbar transparente e quando eu der o Scroll pra baixo ela ficar como "inverse"? Eu já tentei dar um background-color: transparent !important, mas ficou estranho, quanto ao scroll, não compreendi muito bem essa função do Jquery. Poderiam me dar um exemplo, por favor?

1
  • voce vai ter que trocar o css quando o scroll rolar. posta o que voce tem de codigo para termos algo onde partir
    – andrepaulo
    Commented 2/03/2017 às 0:35

1 Resposta 1

2

No do exemplo temos o seguinte trecho de código Jquery no arquivo:

// Offset for Main Navigation
$('#mainNav').affix({
  offset: {
    top: 100
  }
})
.affix-top {
  background-color: transparent !important;
}

.affix {
  background-color: black;
}

h1 {
  margin-top: 100px !important;
}

header {
  position: relative;
  width: 100%;
  min-height: auto;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  background-position: center;
  background-image: url('https://blackrockdigital.github.io/startbootstrap-creative/img/header.jpg');
  text-align: center;
  color: white;
  display: table !important;
}

.navbar-nav {
    background: #f8f8f8;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
      </button>
      <a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a class="page-scroll" href="#about">About</a>
        </li>
        <li>
          <a class="page-scroll" href="#services">Services</a>
        </li>
        <li>
          <a class="page-scroll" href="#portfolio">Portfolio</a>
        </li>
        <li>
          <a class="page-scroll" href="#contact">Contact</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

<header>
  <div class="header-content">
    <div class="header-content-inner">
      <h1 id="homeHeading">Your Favorite Source of Free Bootstrap Themes</h1>
      <p> Duis pharetra, mauris et eleifend pretium, mauris est suscipit eros, et blandit lectus velit nec turpis. Morbi ullamcorper tortor a viverra interdum. Proin bibendum mattis est et maximus. Praesent tristique arcu sed consequat molestie. Etiam id
        hendrerit felis. Ut lobortis erat neque, at dictum tortor cursus eget. Donec consequat nisl at semper iaculis. Phasellus eros lacus, porta in sagittis at, congue sed dolor.</p>

      <p>Curabitur nec tortor sagittis, elementum ipsum et, commodo libero. Vestibulum mattis ultricies luctus. Sed sem justo, aliquam id aliquet quis, accumsan a magna. Quisque non fringilla leo, vel rutrum metus. Aliquam placerat, orci nec finibus suscipit,
        erat eros volutpat leo, eget maximus sapien enim in arcu. Curabitur aliquet tortor quam, quis bibendum leo rutrum in. Quisque vitae lobortis augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus
        sagittis leo et consequat bibendum. Nunc cursus lectus non sem laoreet, ut vulputate dolor malesuada.</p>

      <p>Ultricies metus. Sed vel tincidunt quam. Duis et justo hendrerit, ultrices elit non, mollis erat. Nunc porta accumsan dolor. Ut ut enim scelerisque, pretium odio ac, blandit nunc. Duis dapibus bibendum mi mattis sollicitudin. Proin dictum commodo
        dolor ut venenatis.</p>

      <p>Quisque sed urna accumsan, posuere ex nec, tempor lacus. Pellentesque hendrerit sodales felis, sit amet maximus elit convallis in. Aenean lorem erat, ornare vitae iaculis vitae, gravida et metus. Nulla molestie placerat turpis eget vestibulum. Pellentesque
        aliquet massa ipsum, et ultrices dolor ornare vitae. Nulla consectetur aliquam quam sed sollicitudin. Aenean porttitor mollis feugiat. Integer a magna sit amet dui hendrerit bibendum non sit amet nisl. Donec tristique nunc non lorem ultrices venenatis.
        Aliquam erat volutpat. Quisque ac dignissim dui, luctus pellentesque turpis. Duis lectus felis, vulputate non purus a, efficitur dignissim tortor. Aliquam nec nunc viverra, commodo augue sit amet, molestie nisl. Quisque consequat fermentum turpis,
        id mattis nibh aliquet sed. </p>

<p>Quisque sed urna accumsan, posuere ex nec, tempor lacus. Pellentesque hendrerit sodales felis, sit amet maximus elit convallis in. Aenean lorem erat, ornare vitae iaculis vitae, gravida et metus. Nulla molestie placerat turpis eget vestibulum. Pellentesque
        aliquet massa ipsum, et ultrices dolor ornare vitae. Nulla consectetur aliquam quam sed sollicitudin. Aenean porttitor mollis feugiat. Integer a magna sit amet dui hendrerit bibendum non sit amet nisl. Donec tristique nunc non lorem ultrices venenatis.
        Aliquam erat volutpat. Quisque ac dignissim dui, luctus pellentesque turpis. Duis lectus felis, vulputate non purus a, efficitur dignissim tortor. Aliquam nec nunc viverra, commodo augue sit amet, molestie nisl. Quisque consequat fermentum turpis,
        id mattis nibh aliquet sed. </p>
<p>Quisque sed urna accumsan, posuere ex nec, tempor lacus. Pellentesque hendrerit sodales felis, sit amet maximus elit convallis in. Aenean lorem erat, ornare vitae iaculis vitae, gravida et metus. Nulla molestie placerat turpis eget vestibulum. Pellentesque
        aliquet massa ipsum, et ultrices dolor ornare vitae. Nulla consectetur aliquam quam sed sollicitudin. Aenean porttitor mollis feugiat. Integer a magna sit amet dui hendrerit bibendum non sit amet nisl. Donec tristique nunc non lorem ultrices venenatis.
        Aliquam erat volutpat. Quisque ac dignissim dui, luctus pellentesque turpis. Duis lectus felis, vulputate non purus a, efficitur dignissim tortor. Aliquam nec nunc viverra, commodo augue sit amet, molestie nisl. Quisque consequat fermentum turpis,
        id mattis nibh aliquet sed. </p>
<p>Quisque sed urna accumsan, posuere ex nec, tempor lacus. Pellentesque hendrerit sodales felis, sit amet maximus elit convallis in. Aenean lorem erat, ornare vitae iaculis vitae, gravida et metus. Nulla molestie placerat turpis eget vestibulum. Pellentesque
        aliquet massa ipsum, et ultrices dolor ornare vitae. Nulla consectetur aliquam quam sed sollicitudin. Aenean porttitor mollis feugiat. Integer a magna sit amet dui hendrerit bibendum non sit amet nisl. Donec tristique nunc non lorem ultrices venenatis.
        Aliquam erat volutpat. Quisque ac dignissim dui, luctus pellentesque turpis. Duis lectus felis, vulputate non purus a, efficitur dignissim tortor. Aliquam nec nunc viverra, commodo augue sit amet, molestie nisl. Quisque consequat fermentum turpis,
        id mattis nibh aliquet sed. </p>

<p>Quisque sed urna accumsan, posuere ex nec, tempor lacus. Pellentesque hendrerit sodales felis, sit amet maximus elit convallis in. Aenean lorem erat, ornare vitae iaculis vitae, gravida et metus. Nulla molestie placerat turpis eget vestibulum. Pellentesque
        aliquet massa ipsum, et ultrices dolor ornare vitae. Nulla consectetur aliquam quam sed sollicitudin. Aenean porttitor mollis feugiat. Integer a magna sit amet dui hendrerit bibendum non sit amet nisl. Donec tristique nunc non lorem ultrices venenatis.
        Aliquam erat volutpat. Quisque ac dignissim dui, luctus pellentesque turpis. Duis lectus felis, vulputate non purus a, efficitur dignissim tortor. Aliquam nec nunc viverra, commodo augue sit amet, molestie nisl. Quisque consequat fermentum turpis,
        id mattis nibh aliquet sed. </p>
<p>Quisque sed urna accumsan, posuere ex nec, tempor lacus. Pellentesque hendrerit sodales felis, sit amet maximus elit convallis in. Aenean lorem erat, ornare vitae iaculis vitae, gravida et metus. Nulla molestie placerat turpis eget vestibulum. Pellentesque
        aliquet massa ipsum, et ultrices dolor ornare vitae. Nulla consectetur aliquam quam sed sollicitudin. Aenean porttitor mollis feugiat. Integer a magna sit amet dui hendrerit bibendum non sit amet nisl. Donec tristique nunc non lorem ultrices venenatis.
        Aliquam erat volutpat. Quisque ac dignissim dui, luctus pellentesque turpis. Duis lectus felis, vulputate non purus a, efficitur dignissim tortor. Aliquam nec nunc viverra, commodo augue sit amet, molestie nisl. Quisque consequat fermentum turpis,
        id mattis nibh aliquet sed. </p>


      <p>Ultricies metus. Sed vel tincidunt quam. Duis et justo hendrerit, ultrices elit non, mollis erat. Nunc porta accumsan dolor. Ut ut enim scelerisque, pretium odio ac, blandit nunc. Duis dapibus bibendum mi mattis sollicitudin. Proin dictum commodo
        dolor ut venenatis.</p>

      <p> Duis pharetra, mauris et eleifend pretium, mauris est suscipit eros, et blandit lectus velit nec turpis. Morbi ullamcorper tortor a viverra interdum. Proin bibendum mattis est et maximus. Praesent tristique arcu sed consequat molestie. Etiam id
        hendrerit felis. Ut lobortis erat neque, at dictum tortor cursus eget. Donec consequat nisl at semper iaculis. Phasellus eros lacus, porta in sagittis at, congue sed dolor.</p>
      <p> Duis pharetra, mauris et eleifend pretium, mauris est suscipit eros, et blandit lectus velit nec turpis. Morbi ullamcorper tortor a viverra interdum. Proin bibendum mattis est et maximus. Praesent tristique arcu sed consequat molestie. Etiam id
        hendrerit felis. Ut lobortis erat neque, at dictum tortor cursus eget. Donec consequat nisl at semper iaculis. Phasellus eros lacus, porta in sagittis at, congue sed dolor.</p>

      <a href="#about" class="btn btn-primary btn-xl page-scroll">Find Out More</a>
    </div>
  </div>
</header>

Este trecho de código Jquery abaixo faz com que a div que contém o id="mainNav" seja incremetada com a classe="affix-top" ou classe="affix", dependendo da altura.

// Offset for Main Navigation
$('#mainNav').affix({
offset: {
top: 100
}
})

Sendo assim, voce pode escrever no seu css com cores diferente para cada classe incrementada no momento.

exemplo:

.affix-top {
  background-color: transparent;
}
.affix{
  background-color: black;
}
2
  • Eu editei e melhorei minha resposta, mesmo assim continuo com -2. Porque? Commented 2/03/2017 às 3:54
  • 1
    as pessoas que votaram contra precisar revogar o voto contra delas ou alguem que foi ajudado pelo seu comentário manda up - Eu por exemplo acabei de mandar um up...
    – andrepaulo
    Commented 2/03/2017 às 14:50

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 .