JavascriptからjQueryに書き換える方法を教えていただきたいです。

Question

ページのスクロール量に応じて背景色が変化するコードを書きたいのですが、Jqueryに置き換えると、なぜか上手く機能しないため、解決方法を教えていただきたいです。

window.addEventListener("scroll",function(){

  let scroll = window.pageYOffset;
  
  if( scroll > 80) {
    document.querySelector('.btn').style.backgroundColor = 'transparent';
  } else if ( scroll < 80 ) {
    document.querySelector('.btn').style.backgroundColor = '#ffffff';
  }
});

上のjavascriptだとしっかり機能します。

$(window).on('scroll', function(){ 

  let scroll = $(window).pageYOffset;
  
  if( scroll > 80) {
    $('.btn').css('background-color','transparent');
  } else if ( scroll < 80 ) {
    $('.btn').css('background-color','#ffffff');
  }
});

恐れ入りますが、どなたかご教示いただきたいです。
お手数おかけしますが、ご確認どうぞよろしくお願いしますm m

Comments

[m.ts10806]

「機能する・機能しない・うまくいかない」という表現だと何が問題なのか伝わりませんので、具体的に起きている現象を記載してください。

Answer 1

let scroll = $(window).pageYOffset;
↓↓↓
let scroll = $(window).prop('pageYOffset');

なお、「document.querySelector('.btn')」と「$('.btn')」は同じものではありません
querySelectorでクラスを指定する場合はそのクラスの先頭要素になりますので
「$('.btn:first')」としないと挙動が同じにはなりません

Comments

[juke-footwork]

ご回答ありがとうございます！
教えていただいた通り修正しましたら、機能するようになりました。

ありがとうございますm m