Плёнки на секции и плавное скольжение по ним.
<nav class="marketing-header__nav">
<a href="#section-01" class="marketing-header__nav-item">btn</a>
<!-- /.marketing-header__nav-item -->
</nav>
<div id="section-01" class="productdev-unit">
<div class="pellicle o-08"><a href="#section-01" class="pellicle__btn-down o-09">btn</a></div>
</div>
</div>
$(document).ready(function () {
/**
* V при щелчке на якорь
* V или кнопку вниз
*/
$('.marketing-header__nav-item, .pellicle__btn-down').click(function (e) {
//получаем якорь-ссылку
let anchor = e.target.getAttribute('href');
//начинаем работать с текущей секцией
let currentPellicle = $(anchor).find('.pellicle').removeClass('o-08').addClass('o-0');
setTimeout(function () {
currentPellicle.addClass('hidden');
}, 500);
});
/**
* При пролистывании: пленка растворяется на текущем блоке
*/
let allPelicle = $('.pellicle');//инициализация поведения всех пленок.
$(window).on('scroll', function (e) {
// let deltaY = e.originalEvent.deltaY;
// if (deltaY > 0) {// going down
$.each(allPelicle, function () {
var elementTop = $(this).parent('.marketing-unit, .productdev-unit, .businessdev-unit')[0].getBoundingClientRect().top;
if (elementTop <= $('.ui-header').height() * 5 && elementTop > (- $(this).parent('.marketing-unit, .productdev-unit, .businessdev-unit').outerHeight() + ($('.ui-header').height() * 5))) {
$(this).removeClass('o-08').addClass('o-0');
setTimeout(function () {
$(this).addClass('hidden');
}, 500);
} else {
$(this).removeClass('hidden').removeClass('o-0').addClass('o-08');
}
});
// }
});
//обнуление плёнки в конце документа
$(window).on('scroll wheel', function () {
if ($('#pellicle').height() <= 0) {
// console.log(0);
$('.pellicle').hide();
}
});
});
.pellicle
background: #1A3260
position: absolute
width: 100%
height: 100%
left: 0
top: 0
z-index: 999
transition: .5s
&__btn-down
background: url(../img/components/button-down.jpg)
display: block
width: 193px
height: 50px
margin: auto
margin-top: 48px
border-radius: 3px
cursor: pointer
transition: .3s
&:hover
transform: scale(1.03)
@media screen and (max-width: 767px)
.pellicle
display: none