We have 3 video section when we appears the diagram section the window scroll should off and diagram scroll open and one scroll change other video section last video section should turn on the window scroll
If this will not work then how I will do that type of task.
the main part of this page is diagram section rest of part we can avoid it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="header-wave-style.css">
<title>on Scroll chnage video</title>
</head>
<body>
<header>
<div class="top-header">
<div class="container">
<div class="row">
<div class="brand"><a href="#"><img src="images/logo.png"></a></div>
<nav>
<ul>
<li><a href="#">Platform <i><img src="images/nav-arrow.png"></i></a></li>
<li><a href="#">Solutions <i><img src="images/nav-arrow.png"></i></a></li>
<li><a href="#">Technology <i><img src="images/nav-arrow.png"></i></a></li>
<li><a href="#">Case Studies <i><img src="images/nav-arrow.png"></i></a></li>
<li><a href="#">Resources <i><img src="images/nav-arrow.png"></i></a></li>
<li><a href="#">Company <i><img src="images/nav-arrow.png"></i></a></li>
</ul>
</nav>
<button class="Request-a-demo">Request a demo</button>
</div>
</div>
</div>
<div class="main-header-animation">
<div class="wave-wrap">
</div>
</div>
<div class="header-content">
<h1>AI made faster than you thought<br/>possible, more accurate and<br/>Adaptable than ever.</h1>
<p>Unlock the power of your data at every stage of AI development.</p>
<span class="Technology-born">Technology born of 6+ years of research and proven at world's leading organizations.</span>
<div class="brand-logos">
<ul>
<li><img src="images/intel.png"></li>
<li><img src="images/intel.png"></li>
<li><img src="images/intel.png"></li>
<li><img src="images/intel.png"></li>
<li><img src="images/intel.png"></li>
<li><img src="images/intel.png"></li>
</ul>
</div>
</div>
</header>
<div class="diagram">
<section class="video-1">
<div class="container">
<video autoplay="" loop="" width="100%" height="480">
<source type="video/mp4" src="Diagram.mp4">
</video>
<p>1. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<section class="video-2">
<div class="container">
<video autoplay="" loop="" width="100%" height="480">
<source type="video/mp4" src="Diagram.mp4">
</video>
<p>2. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
</div>
</section>
<section class="video-3">
<div class="container">
<video autoplay="" loop="" width="100%" height="480">
<source type="video/mp4" src="Diagram.mp4">
</video>
<p>3. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
</div>
<footer>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script>
jQuery(window).on("scroll", () => {
jQuery(".diagram").each(function() {
var className = jQuery(this).attr("touching")
var offset = jQuery(this).offset().top - jQuery(window).scrollTop();
if (offset <= 0) {
jQuery('html').addClass('touch')
} else {
jQuery('html').removeClass('touch')
}
})
}).trigger("scroll");
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('.video-3').offset().top;
if (window_top > div_top) {
$('.video-3').removeClass('touch');
}
}
var ticking = false;
var isFirefox = (/Firefox/i.test(navigator.userAgent));
var isIe = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv\:11\./i.test(navigator.userAgent));
var scrollSensitivitySetting = 30;
var slideDurationSetting = 600;
var currentSlideNumber = 0;
var totalSlideNumber = $(".touch section").length;
function parallaxScroll(evt) {
if (isFirefox) {
delta = evt.detail * (-120);
} else if (isIe) {
delta = -evt.deltaY;
} else {
delta = evt.wheelDelta;
}
if (ticking != true) {
if (delta <= -scrollSensitivitySetting) {
//Down scroll
ticking = true;
if (currentSlideNumber !== totalSlideNumber - 1) {
currentSlideNumber++;
nextItem();
}
slideDurationTimeout(slideDurationSetting);
}
if (delta >= scrollSensitivitySetting) {
//Up scroll
ticking = true;
if (currentSlideNumber !== 0) {
currentSlideNumber--;
}
previousItem();
slideDurationTimeout(slideDurationSetting);
}
}
}
function slideDurationTimeout(slideDuration) {
setTimeout(function() {
ticking = false;
}, slideDuration);
}
var mousewheelEvent = isFirefox ? "DOMMouseScroll" : "wheel";
window.addEventListener(mousewheelEvent, _.throttle(parallaxScroll, 60), false);
function nextItem() {
var $previousSlide = $(".touch .video-2").eq(currentSlideNumber - 1);
$previousSlide.removeClass("up-scroll").addClass("down-scroll");
}
function previousItem() {
var $currentSlide = $(".touch .video-3").eq(currentSlideNumber);
$currentSlide.removeClass("down-scroll").addClass("up-scroll");
}
</script>
</body>
</html>