<!-- menu -->
<menu class="menu loading clearfix">
<!-- mainmenu -->
<ul class="mainmenu loading clearfix">
<li><a href="#anchor_aside">В начало</a></li>
<li><a href="#anchor_advantages">Преимущества</a></li>
<li><a href="#anchor_potential">Возможности</a></li>
<li><a href="#anchor_portfolio">Портфолио</a></li>
<li><a href="#anchor_prices">Услуги и цены</a></li>
<li><a href="#anchor_contacts">Контакты</a></li>
</ul>
<!-- /mainmenu -->
</menu>
<!-- /menu -->.menu {
position: fixed;
z-index: 50;
width: 100%;
transition: all .5s ease;
}
.menu.loading {
top: 90px;
}
.menu.scrolling {
top: 70px;
}
.mainmenu {
width: 100%;
text-align: center;
transition: all .5s ease;
}
.mainmenu.loading {
background-color: none;
}
.mainmenu.scrolling {
background-color: rgba(30,30,30,1);
}
.mainmenu li {
display: inline-block;
}
.mainmenu a {
font-size: 18px;
color: rgba(255,255,255,1);
text-decoration: none;
font-family: 'sansation_bold', arial;
padding: 2px 20px 0;
display: block;
text-transform: uppercase;
transition: all .5s ease;
border-bottom: 2px solid transparent;
}
.mainmenu a.active {
border-bottom: 2px solid rgba(12,168,252,1);
}
.mainmenu.loading a {
line-height: 46px;
height: 46px;
}
.mainmenu.scrolling a {
line-height: 36px;
height: 36px;
}
.mainmenu a:hover {
background-color: rgba(12,168,252,1);
}var loadingscrolling = $('.menu, .mainmenu')
$(window).scroll(function(){
if ( $(this).scrollTop() > 100 && loadingscrolling.hasClass("loading") ){
loadingscrolling.removeClass("loading").addClass("scrolling");
} else if($(this).scrollTop() <= 100 && $('.mainmenu').hasClass("scrolling")) {
loadingscrolling.removeClass("scrolling").addClass("loading");
}
});.video_wrap { width: 100vw; height: 100vh; }
.video_wrap h1 { font-size: 30px; color: pink; }
.content { background: white; }
.content h1 { font-size: 24px; color: green; }<html>
<body>
<div class="video_wrap"></div>
<div class="content"></div>
</body>