スクロールすると表示されるアイコンをブレイクポイントを指定して数値を変えたい

現在、以下のコードを使用して500pxスクロールすると指定ブロックが表示されるものを作成しているのですが、
その表示されるブロックをウインドウ幅500px以下の時は200pxスクロールで表示されるようにしたいのですが、JavaScript初心者のため手を焼いています。
どなたかご教授いただけないでしょうか。

<body>
<div class="icon">
    <img src="img/icon.jpg" class="add"/>
</div>
</body>

.icon{
width: 100%;
position: relative;
}

.add{
position: absolute;
bottom:50px;
right:50px;

$(function () {
    var topBtn = $('.add');
    topBtn.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 500) {
            topBtn.fadeIn(500);
        }
    });
});

m.ts10806

2018/12/27 02:42

コードはバッククォート３つの方が適切です。言語名も入れられて１クリックでコピーもできるようになります。

m.ts10806

2018/12/27 02:43

また他の人が再現確認できるようにhtml,cssも適宜ご提示ください

YOD

2018/12/27 02:56

ご指摘いただいた通り修正いたしました。

行動規範の内容に同意します

回答1件

javascript
1$(function () {
2    var topBtn = $('.add');
3    topBtn.hide();
4    $(window).scroll(function () {
5        var bound = $(window).width() <= 500 ? 200 : 500;
6        if ($(this).scrollTop() > bound) {
7            topBtn.fadeIn(500);
8        }
9    });
10});