Раздел перекрывается следующим разделом с помощью прокрутки

Question

Всем привет! Уже не первый час пытаюсь решить проблему: Первая секция имеет фиксированное положение. Следующий раздел должен плавно перекрывать первый (фиксированный раздел) после того, как пользователь прокрутит колесо мыши. Но полная прокрутка страницы не должна прокручиваться до первого целевого раздела и перекрывать весь первый раздел. И это проблема. Я не могу отключить прокрутку для полной страницы. Вот что есть на данный момент:

function scrollintro(){

        $('#intro').bind('wheel', function(e) {
            if(e.originalEvent.wheelDelta < 0) {
                $('#sections-wrapp').addClass('active');
                $('#intro').addClass('active');
            }
            event.preventDefault();
        });
        
        $('#sections-wrapp').bind('wheel', function(e) {
            if(e.originalEvent.wheelDelta > 0) {
                $('#sections-wrapp').removeClass('active');
                $('#intro').removeClass('active');
            }
        });

        var lastScrollTop = 0;
        $(window).scroll(function(event){
            var st = $(this).scrollTop();
        if (st == 0 && st > lastScrollTop){
            $('#sections-wrapp').removeClass('active')
            $('#intro').removeClass('active');
        }
        lastScrollTop = st;
        });
    }

.slide-section-wrapper{
    bottom: 0;
    height: 100vh;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    -webkit-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    z-index: 1;
    background-color: yellow;
}
.sections-wrapp{
    overflow: hidden;
    position: relative;
    -webkit-transform: translateY(100vh);
    -ms-transform: translateY(100vh);
    transform: translateY(100vh);
    -webkit-transition: all .4s cubic-bezier(.23,.6,.01,.22);
    -o-transition: all .4s cubic-bezier(.23,.6,.01,.22);
    transition: all .4s cubic-bezier(.23,.6,.01,.22);
    z-index: 4;
}
.sections-wrapp.active{
  transform: none
}
.overlay-section{
  height: 100vh;
  background-color: blue;
}

.slider-section{
  height: 100vh;
  background-color: green;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <title>overlapping section</title>
</head>
<body>
  <section id="intro" class="slide-section-wrapper">

  </section>
  <div id="sections-wrapp" class="sections-wrapp">
    <section id="overlay-section" class="overlay-section"></section>
    <section id="slider-section" class="slider-section"></section>
  </div>
  
</body>
</html>

Вот пример что должно быть в результате: https://www.loom.com/share/3f10f9bef3c84b05acb155b570c1f3c4 видео для лучшего понимания того, что я имею в виду и, что должен делать. Тест на видео был создан с помощью vue.js, но я должен сделать это с помощью jQuery или чистого JavaScript. То что получилось сделать работает очень криво. Точнее работает через раз. Может кто-то может подсказать как решить эту задачу.

БЛОГ НА HUSL

Раздел перекрывается следующим разделом с помощью прокрутки

Ответы (0 шт):