jQueryで要素の表示非表示をスクロールで制御したい

画面下部にオーバーレイの要素を配置しています。
その要素の表示非表示を切り替えたいのですが、うまくいきません。

#overlayはposition: fixedの要素です。
ドキュメントが読み込まれたときに要素を下からスライドさせるのはうまくいっています。

この要素をスクロール中・スワイプ中だけ非表示にしたいです。
scroll touchmoveイベントが発生したときにslideToggle()でアニメーションして非表示にさせたのですが、一度スクロールすると表示非表示を繰り返してしまします。

$('overlay').delay(700).slideToggle();の部分はスクロールが止まってから0.7秒後に再度出現させるために作ってあります。

コード

javascript
1    (function($){
2        function show_overlay(){
3            var W_SIZE = $(window).width();
4            if (W_SIZE <= 760){
5                $('#overlay').css('position', 'fixed');
6                $('#overlay').slideToggle(duration=700);
7            }
8        }
9        $(document).ready(function(){
10            show_overlay();
11        });
12        $(document).on('scroll touchmove', function(){
13            $('#overlay').slideToggle();
14            $('overlay').delay(700).slideToggle();
15        });
16    })(jQuery);

css
1#overlay{
2    padding: 3px;
3    background-color: #3499cd;
4    font-weight: bold;
5    color: white;
6    display: none;
7    bottom: 0;
8    left: 0;
9    right: 0;
10    z-index: 3;
11}
12.pos-abs{
13    position: absolute;
14}
15.pos-fix{
16    position: fixed;
17}
18
19.ol-inner{
20    width: 20%;
21    float: left;
22}
23
24.ol-sep{
25    padding: 5px;
26}
27
28.ol-image00{
29    max-width: 50%;
30}
31
32.ol-image01{
33    max-width: 100%;
34}
35
36.ol-text{
37    padding: 0px;
38    margin: 0px;
39    color: white;
40    font-weight: bold;
41    font-size: 10px;
42    display: block;
43    margin: 0 auto;
44}
45
46.ol-link{
47    display: block;
48    padding-bottom: 1px;
49    text-decoration: none;
50}

html
1<div id="overlay" class="pos-abs" style="text-align:center;">
2    <div class="ol-inner">
3        <div class="ol-sep">
4            <div class="ol-boder">
5                <a class="ol-link" href="#">
6                    <img class="ol-image00" src="image.png" alt="">
7                    <img class="ol-image01" src="image.png" alt="">
8                </a>
9            </div>
10        </div>
11    </div>
12    <div class="ol-inner">
13        <div class="ol-sep">
14            <div class="ol-boder">
15                <a class="ol-link" href="#">
16                    <img class="ol-image00" src="image.png" alt="">
17                    <img class="ol-image01" src="image.png" alt="">
18                </a>
19            </div>
20        </div>
21    </div>
22    <div class="ol-inner">
23        <div class="ol-sep">
24            <div class="ol-boder">
25                <a class="ol-link" href="#">
26                    <img class="ol-image00" src="image.png" alt="">
27                    <img class="ol-image01" src="image.png" alt="">
28                </a>
29            </div>
30        </div>
31    </div>
32    <div class="ol-inner">
33        <div class="ol-sep">
34            <div class="ol-boder">
35                <a class="ol-link" href="#">
36                    <img class="ol-image00" src="image.png" alt="">
37                    <img class="ol-image01" src="image.png" alt="">
38                </a>
39            </div>
40        </div>
41    </div>
42    <div class="ol-inner">
43        <div class="ol-sep">
44            <div class="ol-boder">
45                <a class="ol-link" href="#">
46                    <img class="ol-image00" src="image.png" alt="">
47                    <img class="ol-image01" src="image.png" alt="">
48                </a>
49            </div>
50        </div>
51    </div>
52</div>