JQueryでdivタグをフェードインさせたいが、上手く機能しない。

Question

模写コーテイングを行なっているのですが、
JQueryの記述方法が分からず、悩んでおります。

私のしたいことはある赤い色のstart-spというクラス名のdivタグを、width780px以下になった時点(レスポンシブ)で、スクロールしたらフワッと表示させたいと考えていますが、上手く実装出来ません。
というよりも、JQueryの記述方法が分かりません。
ご教授願います。

<main>
.
.
.
.
<div class="start-sp">
<a>はじまる</a>
</div>
</main>

.start-sp{
display: none;
float:right;
padding:8px 10px;
border-radius:5px;
color:#fff;
background-color:red;
font-size:0.8em;
position: fixed;
right:10px;
bottom:10px;
}

<script type="text/javascript">
$(window).on( 'scroll', function() {
  if ($(this).Width() <780 && $(this).scrolltop()>=480){
  $("start-sp").fadeIn();
  }
else{
$("start-sp").fadeOut( );
};
});
</script>

Answer 1

下記が間違えているので、修正するとどうでしょうか？

  if ($(this).Width() <780 && $(this).scrolltop()>=480){
// Width() の W は小文字
// scrolltop() の t は大文字
//  $("start-sp") のセレクタに .(コロン)

Answer 2

windowをscrollしてもwidthは変わらないのでは？
resizeしてみてはどうですか？

Comments

[ah6BD2gZo5GnjnT]

回答ありがとうございます。
scrollではなく、resizeに変更したのですが、上手く実装出来ません。
Jqueryのカギカッコの数が正しくないのでしょうか？

[yambejp]

認識がずれてたらすみません
<script>
$(window).on( 'resize', function() {
if($(this).width()<=780){
$('.start-sp').fadeIn();
}else{
$('.start-sp').hide();
}
}).trigger('resize');
</script>
<main>
test
<div class="start-sp">
<a>はじまる</a>
</div>
test
</main>