Fiz um exemplo bem primitivo usando um pouco de Js, para servir de base. Acredito que irá resolver seu problema quando for aplicado os estilos. Optei em usar js puro para você ter uma maior compreensão do que está acontecendo, mas você poderia usar o JQuery também ou recursos do bootstrap! Se quiser saber mais sobre o assunto pesquise sobre, Affix, segue alguns links:
Affix com Bootstrap 3: https://getbootstrap.com/docs/3.3/javascript/#affix
W3Schools sobre affix: https://www.w3schools.com/bootstrap/bootstrap_ref_js_affix.asp
window.onscroll = scroll;
function scroll() {
var scrollTop = window.pageYOffset;
if (scrollTop > 30) {
try {
document.getElementById('antes').id = 'depois'
} catch (e) {
false
}
} else {
try {
document.getElementById('depois').id = 'antes'
} catch (e) {
false
}
}
}
body {
height: 1000px
}
main {
position: relative;
top: 60px
}
#antes {
height: 50px;
width: 100%;
z-index: 10;
position: fixed;
transition: all 0.5s ease-in-out;
background-color: blue;
}
#depois {
height: 50px;
width: 100%;
z-index: 10;
position: fixed;
transition: all 0.5s ease-in-out;
background-color: green;
opacity: 0.9;
}
<div id='antes'>
Hello world!
</div>
<main>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a fermentum nisl. Sed id elementum est. Vivamus pharetra scelerisque mauris ut lobortis. Suspendisse gravida luctus orci volutpat tincidunt. Donec a erat luctus, rhoncus orci condimentum,
aliquet nunc. Nulla varius nisi a pretium pretium. Phasellus et mattis mi. Suspendisse efficitur elit eget libero laoreet ornare. Sed eget tristique erat. Vestibulum nec nulla in massa cursus feugiat. Mauris aliquam dolor in auctor fringilla. Maecenas
efficitur quam vel pellentesque faucibus.
</main>