window.addEventListener('scroll', function () {
var mainNav = document.querySelector('.header');
var elem = document.querySelector('.content').offsetTop;
if (pageYOffset >= elem) {
mainNav.classList.add('is-active');
} else {
mainNav.classList.remove('is-active');
}
});<div class="wrapp">
<div class="menu"></div>
<div class="content"></div>
</div>.wrapp
position: relative
overflow-x: hidden
.menu
position: fixed
left: 0
top: 0
z-index: 99
width: 30%
height: 100vh
display: flex
flex-direction: column
align-items: center
padding: 20px
background-color: black
transition: all 0.3s ease
transform: translateX(-100%)
.menu_active
transform: translateX(0%)
.content
transition: all 0.3s ease
position: relative
z-index: 0
.content_active
transform: translateX(30%)
transition: all 0.3s ease
$(document).ready(function () {
var menu = $('.menu');
var burger = $('.menu-btn');
burger.on('click', function(e) {
burger.toggleClass('active');
menu.toggleClass('menu_active');
$('.content').toggleClass('content_active');
})
$(document).mouseup(function (e) {
if (e.target != menu[0] && burger.has(e.target).length === 0) {
menu.removeClass('menu_active');
$('.content').removeClass('content_active');
burger.removeClass('active');
}
});
});.wrapper
position: relative
overflow-x: hidden
.menu
position: fixed
left: 0
top: 0
z-index: 99
width: 30%
height: 100vh
display: flex
flex-direction: column
align-items: center
padding: 20px
background-color: black
transition: all 0.3s ease
transform: translateX(-100%)
&_logo
position: relative
padding: 20px 0
h1
color: #ffffff
font-family: "Proxima Nova Bold"
font-size: 32px
text-transform: uppercase
letter-spacing: 10.8px
.line
width: 58px
height: 4px
background-color: #bea67c
position: absolute
left: 40px
top: 48%
&_nav
ul
list-style: none
li
margin: 20px 0
a
font-family: 'Proxima Nova Bold'
text-transform: uppercase
color: rgba(#ffffff, 0.5)
font-size: 17px
line-height: 27px
letter-spacing: 0.38px
.menu_active
transform: translateX(0%)
.content
transition: all 0.3s ease
position: relative
z-index: 0
.content_active
transform: translateX(30%)
transition: all 0.3s ease<div class="wrapp">
<div class="menu">
<div class="menu_logo">
<h1>Wooder</h1>
<div class="line"></div>
</div>
<div class="menu_nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</div>
<div class="content">
<header class="header">
<div class="header_menu">
<svg class="ham menu-btn hamRotate180 ham5" viewBox="0 0 100 100" >
<path
class="line top"
d="m 30,33 h 40 c 0,0 8.5,-0.68551 8.5,10.375 0,8.292653 -6.122707,9.002293 -8.5,6.625 l -11.071429,-11.071429" />
<path
class="line middle"
d="m 70,50 h -40" />
<path
class="line bottom"
d="m 30,67 h 40 c 0,0 8.5,0.68551 8.5,-10.375 0,-8.292653 -6.122707,-9.002293 -8.5,-6.625 l -11.071429,11.071429" />
</svg>
<p>Menu</p>
</div>
<div class="header_logo">
<h1>Wooder</h1>
<div class="line"></div>
</div>
<div class="header_nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div class="header_lang">
<img class="info" src="src/img/icons/info.png" alt="info">
<select>
<option value="en">EN</option>
<option value="ru">RU</option>
</select>
</div>
</header>
<div class="heading">
<div class="heading_title">
<h1>Wooder</h1>
<button class="more">
learn more
<img src="src/img/heading/arrow_btn.png" alt="arrow">
</button>
<div class="animouse">
<img class="mouse" src="src/img/icons/mouse.png" alt="mouse">
<img class="arrow" src="src/img/icons/mouse_arrow.png" alt="arrow">
<h3 class="scroll">scroll</h3>
</div>
</div>
<div class="left-container">
<img class="left_background" src="src/img/heading/left_bg.png" alt="background">
<div class="letter">
<img src="src/img/heading/f.png" alt="letter">
</div>
</div>
<div class="right-container">
<img class="right_background" src="src/img/heading/right_bg.png" alt="background">
<div class="text">
<h3>Furniture & decor</h3>
</div>
<img class="share" src="src/img/icons/share.png" alt="share">
<div class="line"></div>
</div>
</div>
</div>
</div>