スマホ時(一定の画面サイズ以下)でスクロール追時ボタンを設置、フッター手前フェードアウト

スクロールに追時するボタンを作成しています。
ボタンはフッター手前でフェードアウトするようにしています。

ボタンのフェードアウトは出来たのですが、スマホ時(画面サイズ800以下)の時のみにボタンが表示されるようにしたいです。

下記、html,css,jQueryのコードを貼っています。
よろしくお願いいたします。

html
1<div class="btn-sp">
2	<a href="#"><img src="" alt=""></a>
3</div>
4

css
1.btn-sp{
2	display: none;
3	width: 100%;
4	position: fixed;
5	bottom: 0;
6}
7@media screen and (max-width: 800px){
8 .btn-sp{
9	display: block;
10 }
11}
12

javascript
1window.onscroll = function () {
2        var check = window.pageYOffset ;       //現在のスクロール地点 
3        var docHeight = $(document).height();   //ドキュメントの高さ
4        var dispHeight = $(window).height();    //表示領域の高さ
5 
6        if(check > docHeight-dispHeight-1700){   //判別式　フッターからの距離）
7            $('.btn-sp').fadeOut(1000);	//1000 はフェードアウトの速度です。
8 
9        }else{
10            $('.btn-sp').fadeIn(1000);	//1000 はフェードインの速度です。
11        }
12};

m.ts10806

2018/05/14 04:41

htmlではclassがbtn-sp-fixとなっていてCSS、JSと一致していませんが、これは？

退会済みユーザー

2018/05/14 04:45 編集

変更させて頂きました。classはbtn-spで統一しています。質問投稿した際にクラスをつけ間違えました。

m.ts10806

2018/05/14 04:49

聞くのを忘れて再現確認をとってしまったのですが、起きている現象としては「フェードアウトはするがフェードインしない」といったところでしょうか？

m.ts10806

2018/05/14 04:50

1700がすごく効いている様に思うのですが、この1700というのは何から来た値ですか？

退会済みユーザー

2018/05/14 05:11

現在のコードではpcでみた時にも、スマホで見た時にもボタンが表示されてしまします。pcの際はボタンは非表示にスマホ時にボタンを表示、フッター前でフェードアウトをしたいです。

退会済みユーザー

2018/05/14 05:15

1700はフッターからの距離です。

m.ts10806

2018/05/14 05:22

max-width: 800px　でしょうね。あくまでブラウザの幅で決まってるのでPCで表示されるのはおそらく当然ではないかと。PCブラウザで800以上に広げれば今のコードでも非表示にはなりますよ。　1700についてですが、固定で入れることによりページの柔軟性が失われるので別のやり方の方が良いかなと。bodyの高さとかその辺りの方が適切だと思います。