最上部に配置したフルスクリーンスライドショー（クロスフェード）をスクロールした際は他の下部内容を見れるようにしたい

前提・実現したいこと

最上部にフルスクリーンで表示される画像を、jqueryのクロスフェード機能で画像3枚が順にスライドしていくような作りにしたいです。また、フルスクリーンで表示されている最上部箇所をスクロールした際は、HTMLに実装した他の内容も見れるように、フルスクリーン箇所は最上部での表示のみに留めておきたいです。

発生している問題・エラーメッセージ

スライドするフルスクリーン画像が、最上部のみだけでなく、スクロールをしてもページを通して全体に表示がされてしまい、HTMLに記載した他の内容が見れない状態になっています。

該当のhtmlソースコード

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <title>タイトルタイトルタイトル</title>
6        <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
7        <link rel="stylesheet" href="css/style.css">
8        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
9    </head>
10    <body>
11        <div id="topCrossfad">
12            <div class="fullSlideShow">
13                <ul>
14                    <li><a href="#1"><img src="ダミーダミーダミー" alt=""></a></li>
15                    <li><a href="#2"><img src="ダミーダミーダミー" alt=""></a></li>
16                    <li><a href="#3"><img src="ダミーダミーダミー" alt=""></a></li>
17                </ul>
18            </div>
19        </div>
20        <header>
21            <div class="container header-flexbox">
22                <nav>
23                    <ul class="nav-main">
24                        <li><a href="#">ダミーダミーダミー</a></li>
25                        <li><a href="#">ダミーダミーダミー</a></li>
26                        <li><a href="#">ダミーダミーダミー</a></li>
27                    </ul>
28                </nav>
29            </div>
30        </header>
31        <div class="message-wrapper">
32            <div class="container">
33                <div class="message-text">
34                    <p>ダミーダミーダミー</p><p>ダミーダミーダミー</p><p>ダミーダミーダミー</p>
35                </div>
36            </div>
37        </div>
38        <script src="script.js"></script>
39    </body>
40</html>

該当のcssソースコード

css
1@charset "UTF-8";
2body {
3    font-family: 'Noto Sans JP', sans-serif;
4    font-family: 'Roboto', sans-serif;
5}
6a {
7    text-decoration: none;
8}
9.container {
10    width: 1170px;
11    padding: 0 15px;
12    margin: 0 auto;
13}
14#topCrossfad {
15    width: 100%;
16    text-align: center;
17}
18.fullSlideShow {
19    width: 100%;
20    text-align: left;
21    position: relative;
22    overflow: hidden;
23}
24.fullSlideShow ul {
25    top: 50%;
26    left: 50%;
27    width: 100%;
28    position: fixed; 
29    overflow: hidden;
30}
31.fullSlideShow ul li {
32    top: 0;
33    left: 0;
34    width: 100%;
35    display: none;
36    position: absolute;
37}
38.fullSlideShow ul li img {
39    width: 100%;
40}
41.fullSlideShow .btnPrev,
42.fullSlideShow .btnNext {
43    margin-top: -25px;
44    top: 50%;
45    width: 50px;
46    height: 50px;
47    position: fixed; 
48    z-index: 105;
49}
50.fullSlideShow .btnPrev {
51    left: 10px;
52    background: transparent url(ダミーダミーダミー) no-repeat center center;
53}
54.fullSlideShow .btnNext {
55    right: 10px;
56    background: transparent url(ダミーダミーダミー) no-repeat center center;
57}
58.pagiNation {
59    bottom: 30px;
60    left: 0;
61    width: 100%;
62    height: 15px;
63    text-align: center;
64    position: fixed; 
65    z-index: 110; 
66    visibility: visible; 
67}
68
69.pagiNation a {
70    margin: 0 5px;
71    width: 20px;
72    height: 20px;
73    display: inline-block;
74    overflow: hidden;
75    background: #000;
76}
77.pagiNation a.pnActive {
78    filter:alpha(opacity=100)!important;
79    -moz-opacity: 1!important;
80    opacity: 1!important;
81}
82.fullSlideShow ul:after {
83    content: ".";
84    height: 0;
85    clear: both;
86    display: block;
87    visibility: hidden;
88}
89.fullSlideShow ul {
90    display: inline-block;
91    overflow: hidden;
92}
93header {
94    height: 80px;
95    width: 100%;
96    position: sticky;
97    top: 0;
98    z-index: 2; 
99}  
100.header-flexbox {
101    display: flex;
102    justify-content: space-between;
103}
104.nav-main {
105    display: flex;
106    font-size: 14px;
107}
108.nav-main li {
109    margin-left: 35px;
110}
111.message-wrapper {
112    text-align: center;
113}
114.message-text p {
115    font-size: 18px;
116}

該当のjqueryソースコード

jquery
1$(function(){
2    setElm = $('.fullSlideShow');
3    fadeSpeed = 1000;
4    switchDelay = 5000;
5    easing = 'linear';
6    sideNavi = 'on'; 
7    sideHide = 'hide'; 
8    naviOpc = 0.5;
9    pnOpacity = 0.5;
10    ua = navigator.userAgent;
11    $(window).load(function(){
12        setElm.each(function(){
13            var targetObj = $(this),
14                findUl = targetObj.find('ul'),
15                findLi = findUl.find('li'),
16                findLiCount = findLi.length,
17                findLiFirst = findUl.find('li:first');
18            findLi.each(function(i){
19                $(this).attr('class','viewList' + (i + 1).toString());
20            });
21            findLi.css({display:'block',opacity:'0',zIndex:'99'});
22            findLiFirst.addClass('mainActive').css({zIndex:'100'}).stop().animate({opacity:'1'},fadeSpeed);
23            if(findLiCount > 1){
24                var pagination = $('<div class="pagiNation"></div>');
25                targetObj.append(pagination);
26                findLi.each(function(i){
27                    pagination.append('<a href="javascript:void(0);" class="pn'+(i+1)+'"></a>');
28                });
29                var pnPoint = pagination.children('a'),
30                    pnFirst = pagination.children('a:first'),
31                    pnLast = pagination.children('a:last'),
32                    pnCount = pagination.children('a').length;
33                pnFirst.addClass('pnActive');
34                if(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1){
35                    pnPoint.css({opacity:(pnOpacity)});
36                } else {
37                    pnPoint.css({opacity:(pnOpacity)}).hover(function(){
38                        $(this).stop().animate({opacity:'1'},300);
39                    }, function(){
40                        $(this).stop().animate({opacity:(pnOpacity)},300);
41                    });
42                }
43                pnPoint.click(function(){
44                    clearInterval(setAutoTimer);
45                    var setNum = pnPoint.index(this),
46                        showCont = setNum+1;
47                    findUl.find('.viewList' + (showCont)).siblings().removeClass('mainActive').stop().animate({opacity:'0'},fadeSpeed,function(){$(this).css({zIndex:'99'});});
48                    findUl.find('.viewList' + (showCont)).addClass('mainActive').stop().animate({opacity:'1'},fadeSpeed,function(){$(this).css({zIndex:'100'});});
49                    pnPoint.removeClass('pnActive');
50                    $(this).addClass('pnActive');
51                    fadeTimer();
52                });
53                function switchNext(){
54                    var setActive = pagination.find('.pnActive');
55                    setActive.each(function(){
56                        var pnLengh = pnPoint.length,
57                            pnIndex = pnPoint.index(this),
58                            pnCount = pnIndex+1;
59                        if(pnLengh == pnCount){
60                            pnFirst.click();
61                        } else {
62                            $(this).next('a').click();
63                        }
64                    });
65                }
66                function switchPrev(){
67                    var setActive = pagination.find('.pnActive');
68                    setActive.each(function(){
69                        var pnLengh = pnPoint.length,
70                            pnIndex = pnPoint.index(this),
71                            pnCount = pnIndex+1;
72                        if(1 == pnCount){
73                            pnLast.click();
74                        } else {
75                            $(this).prev('a').click();
76                        }
77                    });
78                }
79                function fadeTimer(){
80                    setAutoTimer = setInterval(function(){
81                        switchNext();
82                    },switchDelay);
83                }
84                fadeTimer();
85            }
86            var setLiImg = findLi.find('img'),
87                baseWidth = setLiImg.width(),
88                baseHeight = setLiImg.height(),
89                selfWH = baseWidth / baseHeight;
90            function setArea(){
91                var wdWidth = $(window).width(),
92                    wdHeight = $(window).height(),
93                    rwdHeight = wdWidth / selfWH;
94
95                if(rwdHeight < $(window).height()){
96                    rwdHeight = $(window).height();
97                    wdWidth = rwdHeight * selfWH;
98                }
99                targetObj.css({height:wdHeight});
100                findUl.css({marginTop:-rwdHeight/2,marginLeft:-wdWidth/2,width:wdWidth,height:rwdHeight});
101                findLi.css({height:rwdHeight});
102            }
103            $(window).resize(function(){setArea();}).resize();
104
105            $('body').css({visibility:'visible'});
106        });
107    });
108});