navbar semantic-ui transition

Question

I want to create a transition in navbar (menu), when scrolling the page scroll, do not know the name of the effect but it is this one (just scroll down and the navbar becomes solid with a white background, or scroll up it dissolves with a fade out effect) so that’s the effect I want to create, I’m using the semantic-ui framework, and I need that besides this effect, as soon as it occurs and the background turns white, the font color also changes to black, what I did only creates a simple fade effect, and does not change the text color!

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'
      });
    })
  ;

How can I create that effect ?

Answer 1

In the CSS, you must add the attribute color in class .main.menu.fixed, for example:

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

In a solution using jQuery you could also verify the occurrence of Scroll and remove the class inverted from the Menu, and add it when the scroll returns to the top.

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

Answer 2

You can apply a color to all elements of the div fixed with the 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;
}

In the case above, I put #000 (black). The first line applies the color to all elements within the div. The second to dropdown.

In the second block, apply the colors in the hover, both to links and to dropdown.

The !important is to ignore the component’s default style.

Behold:

$(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 />