JSFiddle - React, Tailwind, and code Playground
HTML
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="mysite.css">
<script type="text/javascript" src="mystyle.js"></script>
<body>
<div id="menu" class="default">
<ul>
<li><a href="#">Услуги</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Портфолио</a></li>
<li><a href="#">С чем работаем</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
<div>
<p><image src="1.jpg"></p>
<p><image src="2.jpg"></p>
<p><image src="3.jpg"></p>
<p><image src="4.jpg"></p>
<p><image src="5.jpg"></p>
</div>
</body>
</html>
CSS
#menu {
text-transform: uppercase;
text-align: center;
line-height: 40px;
background: #000000;
text-shadow:0 1px 1px black;
-moz-border-radius: 5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#menu ul {
padding:0;
margin:0;
}
#menu li{
display: inline;
list-style:none;
margin: 5px 10px;
}
#menu li a {
padding:5px 10px;
color:#fff;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu li a:hover{
background: #696969;
color: #D3D3D3;
-webkit-transition-property: color, background;
-webkit-transition-duration: 0.5s, 0.5s;
}
.default {
width:auto;
}
.fixed {
position:fixed;
top:-5px; left:0;
width:100%;
padding:10px 0;
-moz-box-shadow: 5px 5px 20px #333;
-webkit-box-shadow: 5px 5px 20px #333;
box-shadow: 5px 5px 20px #333;
}
.transbg {
background-color: rgba(60, 130, 190, 0.7)!important;
}
JavaScript
$(document).ready(function(){
var $menu = $("#menu");
$(window).scroll(function(){
if ( $(this).scrollTop() > $header.height() && $menu.hasClass("default") ){
$menu.fadeOut('fast',function(){
$(this).removeClass("default")
.addClass("fixed transbg")
.fadeIn('fast');
});
} else if($(this).scrollTop() <= $header.height() && $menu.hasClass("fixed")) {
$menu.fadeOut('fast',function(){
$(this).removeClass("fixed transbg")
.addClass("default")
.fadeIn('fast');
});
}
});//scroll
$menu.hover(
function(){
if( $(this).hasClass('fixed') ){
$(this).removeClass('transbg');
}
},
function(){
if( $(this).hasClass('fixed') ){
$(this).addClass('transbg');
}
});//hover
});//jQuery