1

Quero criar uma transição na navbar (menu), quando rolo o scroll da pagina, não sei o nome do efeito mas é esse aqui (é só rolar pra baixo e a navbar fica solida com um background branco, ou rolar pra cima ela dissolve com um efeito fade out) então é esse o efeito que eu quero criar, estou usando o framework semantic-ui, e preciso que alem desse efeito, assim que ele ocorrer e o background ficar branco, a cor da fonte também mude pra preto, o que eu fiz so cria um efeito fade simples, e não muda a cor de texto!

HTML

<div class="ui inverted vertical masthead center aligned segment">
  <div class="ui inverted pointing borderless main menu">
    <div class="ui text container">
      <div href="#" class="header item">
        <img class="logo" src="https://semantic-ui.com/examples/assets/images/logo.png">
        Project Name
      </div>
      <a href="#" class="item">Blog</a>
      <a href="#" class="item">Articles</a>
      <a href="#" class="ui right floated dropdown item">
        Dropdown <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Link Item</div>
          <div class="item">Link Item</div>
          <div class="divider"></div>
          <div class="header">Header Item</div>
          <div class="item">
            <i class="dropdown icon"></i>
            Sub Menu
            <div class="menu">
              <div class="item">Link Item</div>
              <div class="item">Link Item</div>
            </div>
          </div>
          <div class="item">Link Item</div>
        </div>
      </a>
    </div>
  </div>
</div>

CSS

body {
    background-color: #FFFFFF;
  }
  .main.menu {
    border-radius: 0;
    border: none;
    box-shadow: none;
    transition:
      box-shadow 0.5s ease,
      padding 0.5s ease
    ;
  }
  .main.menu .item img.logo {
    margin-right: 1.5em;
  }
  .overlay {
    float: left;
    margin: 0em 3em 1em 0em;
  }
  .overlay .menu {
    position: relative;
    left: 0;
    transition: left 0.5s ease;
  }
  .main.menu.fixed {
    background-color: #FFFFFF;
    border: 1px solid #DDD;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
  }
  .overlay.fixed .menu {
    left: 800px;
  }

JS

  $(document)
    .ready(function() {

      // fix main menu to page on passing
      $('.main.menu').visibility({
        type: 'fixed'
      });
      $('.overlay').visibility({
        type: 'fixed',
        offset: 40
      });

      // show dropdown on hover
      $('.main.menu  .ui.dropdown').dropdown({
        on: 'hover'
      });
    })
  ;

Como eu posso criar esse efeito ?

2 Respostas 2

1

No CSS, deverá acrescentar o atributo color na classe .main.menu.fixed, por exemplo:

.main.menu.fixed {
  background-color: #FFFFFF;
  color: #333333;
  border: 1px solid #DDD;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}

Numa solução utilizando jQuery poderia também verificar a ocorrência do Scroll e remover a class inverted do Menu, e adicioná-la quando o scroll voltasse ao topo.

$('.main.menu').removeClass('inverted');
$('.main.menu').addClass('inverted');
1

Você pode aplicar uma cor a todos os elementos da div fixa com o CSS:

div.menu.fixed *,
div.menu.fixed a.floated.dropdown.item{
   color: #000 !important;
}

div.menu.fixed a:hover,
div.menu.fixed a.floated.dropdown.item:hover{
   color: #000 !important;
   background-color: #f5f5f5 !important;
}

No caso acima, coloquei #000 (preto). A primeira linha aplica a cor a todos os elementos dentro da div. A segunda ao dropdown.

No segundo bloco, aplicar as cores no hover, tanto aos links quando ao dropdown.

O !important é para ignorar o estilo padrão do componente.

Veja:

$(document)
    .ready(function() {

      // fix main menu to page on passing
      $('.main.menu').visibility({
        type: 'fixed'
      });

      $('.overlay').visibility({
        type: 'fixed',
        offset: 40
      });
      // show dropdown on hover
      $('.main.menu  .ui.dropdown').dropdown({
        on: 'hover'
      });
    })
  ;
body {
    background-color: #FFFFFF;
  }
  .main.menu {
    border-radius: 0;
    border: none;
    box-shadow: none;
    transition:
      box-shadow 0.5s ease,
      padding 0.5s ease
    ;
  }
  .main.menu .item img.logo {
    margin-right: 1.5em;
  }
  .overlay {
    float: left;
    margin: 0em 3em 1em 0em;
  }
  .overlay .menu {
    position: relative;
    left: 0;
    transition: left 0.5s ease;
  }
  .main.menu.fixed {
    background-color: #FFFFFF !important;
    border: 1px solid #DDD !important;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2) !important;
  }
  .overlay.fixed .menu {
    left: 800px;
  }

div.menu.fixed *,
div.menu.fixed a.floated.dropdown.item{
   color: #000 !important;
}

div.menu.fixed a:hover,
div.menu.fixed a.floated.dropdown.item:hover{
   color: #000 !important;
   background-color: #f5f5f5 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.js"></script>

<div class="ui inverted vertical masthead center aligned segment">
  <div class="ui inverted pointing borderless main menu">
    <div class="ui text container">
      <div href="#" class="header item">
        <img class="logo" src="https://semantic-ui.com/examples/assets/images/logo.png">
        Project Name
      </div>
      <a href="#" class="item">Blog</a>
      <a href="#" class="item">Articles</a>
      <a href="#" class="ui right floated dropdown item">
        Dropdown <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Link Item</div>
          <div class="item">Link Item</div>
          <div class="divider"></div>
          <div class="header">Header Item</div>
          <div class="item">
            <i class="dropdown icon"></i>
            Sub Menu
            <div class="menu">
              <div class="item">Link Item</div>
              <div class="item">Link Item</div>
            </div>
          </div>
          <div class="item">Link Item</div>
        </div>
      </a>
    </div>
  </div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

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 .