jQuery スクロールして画面の下に来た時にパーツをフェードアウトさせたいです。

スマホ表示の際に<div class="sp-fixedNav">が画面最下部にきた際にfadeoutさせたいのですがうまく行きません。

HTML
1<div class="sp-fixedNav">
2    <ul class="sp-fixedNav_list">
3      <li><a href="../index.html"><i class="fas fa-home"></i></a></li>
4      <li><a href="tel:0422-52-3344"> 電話</a></li>
5      <li><a href="../access.html"> 交通案内</a></li>
6    </ul>
7  </div>

jQuery
1$(function() {
2   var fixContact = $('.sp-fixedNav');
3   $(window).bind("scroll", function() {
4    scrollHeight = $(document).height();
5    scrollPosition = $(window).height() + $(window).scrollTop();
6    if ( (scrollHeight - scrollPosition) / scrollHeight <= 0.05) {
7            fixContact.fadeOut();
8    } else {
9            fixContact.fadeIn();
10    }
11});
12});

scss
1  .sp-fixedNav {
2    @include media(md) {
3      display: none;
4    }
5    @include media(sm) {
6      display: block;
7      position: fixed;
8      bottom: 0;
9      left: 0;
10      width: 100%;
11      background: $color_white;
12      height: 54px;
13      border-top: 1px solid $color_primary;
14
15      .sp-fixedNav_list {
16        display: flex;
17        justify-content: space-around;
18        align-items: center;
19        li {
20          display: inline-block;
21          width: calc((100% - 64px) / 2);
22          text-align: center;
23          border-left: 1px solid $color_primary;
24          a {
25            display: block;
26            padding: 16px;
27            color: $color_primary;
28          }
29          &:first-child {
30            width: 64px;
31            border-left: none;
32          }
33        }
34      }
35    }
36  }

<div class="sp-fixedNav">が外面最下部(少し手前でも可)にきた際にフェードアウトさせるにはどうすればいいでしょうか?