[jQuery]特定の位置にスクロール（横スクロール）したら、インベントを発生させたいです。

現在プログラミングを勉強中の初学者です。
横スクロールができるjQuery Mousewheelを使っています。
横スクロールすると、見出しが発生するよにしたいです。

現状は更新と同時に見出しのインベントが発生しています。

見出しにanimate.cssのjQueryを使っています。
どうぞよろしくおねがします。

html
1<!doctype html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
6
7<title>無題ドキュメント</title>
8<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
9 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
10<link rel="stylesheet" href="css/style.css">
11  <link rel="stylesheet" href="css/animate.css">
12<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
13<script src="js/jquery.mousewheel.min.js"></script>
14<script src="js/jquery.mousewheel.js"></script>
15<script src="js/main.js"></script>
16<script>
17//横スクロール用script
18$(function() {
19  var cont = $('#main-wrapper');
20  var contW = $('.item-box').outerWidth(true) * $('.item-box',cont ).length;
21  cont.css('width', contW);
22  var speed = 5;
23  $('html').mousewheel(function(event, mov) {
24  //ie firefox
25    $(this).scrollLeft($(this).scrollLeft() - mov * speed);
26    //webkit
27    $('body').scrollLeft($('body').scrollLeft() - mov * speed);
28    return false;
29  });
30
31});
32//ページトップのスクロールするとぼやける背景画像用script
33$(window).scroll(function () {
34  var chronologyTtl = $('.first-view').height();
35  var scrollnow = $(window).scrollLeft();
36  var scrollblur = (chronologyTtl+10*scrollnow)/chronologyTtl-1;
37  var blur = Math.floor(scrollblur);
38  $('.first-view').css('-webkit-filter','blur('+blur+'px)');
39  $('.first-view').css('filter','blur('+blur+'px)');
40});
41</script>
42</head>
43<body>
44
45<div class="first-view">
46  <h1 class="animated bounceInDown">TEST</h1>
47</div>
48
49<div id="main-wrapper">
50
51  <div class="item-box">
52    <div class="item-detail">
53      <h2 class="animated bounceInDown">見出し</h2>
54     <p>これはテストです。これはテストです。これはテストです。これはテストです。</p>
55    </div>
56  </div>
57  
58  <div class="item-box">
59    <div class="item-detail">
60      <h2 class="animated bounceInDown">見出し</h2>
61     <p>これはテストです。これはテストです。これはテストです。これはテストです。</p>
62    </div>
63  </div>
64  
65  <div class="item-box">
66    <div class="item-detail">
67      <h2 class="animated bounceInDown">見出し</h2>
68     <p>これはテストです。これはテストです。これはテストです。これはテストです。</p>
69    </div>
70  </div>
71
72  
73</div>
74</body>
75</html>
76

css
1@charset "UTF-8";
2
3body {
4  overflow: hidden;
5}
6
7.first-view {
8  width: 100vw;
9  height: 100vh;
10  background: url(/demo/.assets/history-scroll01.jpg) no-repeat bottom center;
11  background-size: cover;
12  overflow: hidden;
13  position: fixed;
14}
15
16.first-view h1 {
17  position: absolute;
18  top: 50%;
19  left: 50%;
20  transform: translateY(-50%) translateX(-50%);
21  text-align: center;
22  font-size: 30px;
23  letter-spacing: .2rem;
24  margin: -6% auto 0;
25}
26
27.first-view h1 img {
28  width: 180px;
29  display: block;
30  margin: 0 auto 30px;
31}
32
33#main-wrapper{
34  margin: 0 auto 0 100vw;
35  height: 100vh;
36  padding: 0;
37  z-index: 10;
38  overflow: hidden;
39  position: relative;
40  background: rgba(255,255,255,.8);
41}
42#main-wrapper:after {
43  content: "";
44  position: absolute;
45  bottom: 40px;
46  left: 0;
47  background: rgba(185, 7, 23, 1);
48  width: 100%;
49  height: 2px;
50}
51.item-box {
52  float: left;
53  margin: 0 auto;
54  height: 100vh;
55  padding: 0;
56  z-index: 10;
57  overflow: hidden;
58  width: 2000px;
59  border-left: 1px dotted #ccc;
60  position: relative;
61}
62.item-box:after {
63  content: "";
64  position: absolute;
65  left: 50%;
66  margin-left: -5px;
67  bottom: 36px;
68  background: rgba(185, 7, 23, 1);
69  width: 10px;
70  height: 10px;
71  border-radius: 5px;
72}
73.item-detail {
74  position: absolute;
75  top: 30%;
76  left: 50%;
77  transform: translateY(-50%) translateX(-50%);
78  width: 80%;
79}
80.item-detail h2, .item-detail p {
81  letter-spacing: 0.1em;
82  text-align: justify;
83  line-height: 1.4;
84  margin-bottom: 15px;
85}
86.item-detail h2 {
87  margin-top:0;
88  margin-bottom:15px;
89  text-align: center;
90  font-size: 2.5em;
91}
92.item-detail img {
93  display: block;
94  margin: 0 auto 10px;
95  width: 160px;
96}
97
98

js
1// JavaScript Document
2$(window).on('load scroll', function(){
3
4  //animatedのclassを持った要素をセレクタに指定
5  var elem = $('.animated');
6
7  elem.each(function () {
8
9    //data属性からアニメーション名を取得
10    var isAnimate = $(this).data('animate');
11    //animated要素に位置を取得
12    var elemOffset = $(this).offset().top;
13    //現在のスクロールポジションを取得
14    var scrollPos = $(window).scrollTop();
15    //ウィンドウの高さを取得
16    var wh = $(window).height();
17
18    //animated要素がウィンドウ内の中央位置にきたら処理
19    if(scrollPos > elemOffset - wh + (wh / 2)){
20      $(this).addClass(isAnimate);
21    }
22  });
23
24});