artemsites
11/11/2019 - 12:24 PM

Плёнки на секции и плавное скольжение по ним.

Плёнки на секции и плавное скольжение по ним.

<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