запретить нажимать на кнопку, пока не проскроллен блок полностью.(фуллскрин блок)
есть фуллскрин блок
.wrapper{
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header {
min-height: 100vh;
background: url("images/bgheader.jpg") center / cover no-repeat fixed;
text-align: center;
color: #fff;
display: flex;
flex-direction: column;
z-index: 100;
}
.logo {
width: 100%;
height: 100%;
flex: 1 1 auto;
padding-top: 40px;
}
.tagline {
font-size: 60px;
font-family: "Bebas Neue";
letter-spacing: 5.71px;
line-height:70,31px;
}
.under_tagline {
flex: 1 1 auto;
font-size: 16px;
font-family: Open Sans;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 22px;
}
.scroll {
flex: 0 1 auto;
padding-bottom: 71px;
}
.scroll-down{
font-family: Open Sans;
font-size: 11px;
font-style: normal;
font-weight: 600;
line-height: 15px;
letter-spacing: 3.700000047683716px;
color: #fff;
position: relative;
}
.scroll-down{
padding: 20px;
}
<div class="wrapper">
<div class="header">
<div class="logo">
<a href=""><img src="images/logo.png" alt=""></a>
</div>
<p class="tagline">
PARTNER WITH KONSTRUCT
</p>
<p class="under_tagline">
An award-winning construction management firm
</p>
<div class="scroll">
<a href="#scroll" class="scroll-down flowing-scroll">SCROLL DOWN</a>
</div>
</div>
</div>
и после него идёт шапка с бургерным меню
$(document).ready(function(){
$('.navbar_burger').click(function(event){
$('.navbar_burger,.navbar_link').toggleClass('active');
$('body').toggleClass('lock')
});
})
.navbar {
position: sticky;
top: 0;
border-bottom: 1px solid #E6E6E6;
z-index: 1;
}
.navbar:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 3;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
}
.logo_link {
flex: 0 0 100px;
z-index: 4;
}
.logo_link img{
width: 100%;
}
.navbar_burger {
display: none;
}
.navbar_link{
display: flex;
justify-content: space-between;
}
.navbar_link li{
margin:0 40px;
z-index: 4;
}
.navbar_link li a{
color: #48555B;
font-family: Open Sans;
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: 16px;
letter-spacing: 1.0909091234207153px;
}
.navbar_link li a:hover{
color: #00a4e5;
}
.navbar_link li .active{
color: #00a4e5;
}
@media(max-width: 767px){
body.lock{
overflow: hidden;
}
.logo_link{
flex: 0 0 80px;
}
.nav{
height: 40px;
}
.navbar_burger {
display: block;
width: 30px;
height: 20px;
position: relative;
z-index: 4;
}
.navbar_burger span{
position: absolute;
width: 100%;
height: 2px;
background-color: #48555B;
left: 0;
top: 9px;
transition:all 0.5s ease 0s;
}
.navbar_burger:before,
.navbar_burger:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #48555B;
left: 0;
transition:all 0.5s ease 0s;
}
.navbar_burger:before{
top: 0;
}
.navbar_burger:after{
bottom: 0;
}
.navbar_link{
position: fixed;
top: -100%;
height: 100%;
width: 100%;
background-color: #325aff;
display: block;
padding: 60px 0 0 0;
transition:all 0.5s ease 0s;
overflow: auto;
}
.navbar_link.active{
top: 0;
}
.navbar_link li{
text-align: center;
margin-bottom:40px ;
}
.navbar_link li a{
font-size: 45px;
}
}
.navbar_burger.active span{
transform: scale(0);
}
.navbar_burger.active:before{
transform: rotate(-405deg);
top: 9px;
}
.navbar_burger.active:after{
transform: rotate(405deg);
bottom: 9px;
}
<div class="navbar" id="scroll">
<div class="padding">
<nav class="nav">
<div class="logo_link">
<a href="#">
<img src="images/logo_black_navbar.png" alt="">
</a>
</div>
<div class="navbar_burger">
<span></span>
</div>
<ul class="navbar_link">
<li><a href="#">Home</a></li>
<li><a class="active" href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
Как запретить нажимать на кнопку меню, если фуллскрин блок не пролистан полностью?