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 ?