Javascript 站点标题是否基于scrollTop和scrollUp可见？

在我的网页中，我有一个标题，当我下降100像素时，它应该消失，当我上升50像素时，它应该出现

我写了这个脚本，但似乎不起作用

CSS

/* CSS will only work on screens larger than 1024px */
@media (min-width: 1024px){
 #site_header {
  display:none; 
  width:100%!important;
 }
}

jQuery(document).ready(function( $ ) {
   jQuery(window).scroll(function() {

       //Decides when this script will work 1024
      if ( $ (window).width() > 1024) {

       //How far down does the user has to scroll 100px
        if ( $ (window).scrollTop() >= 100) {
            $ ('#site_header').fadeOut();

          } else {

           if ( $ (window).scrollUp() >= 50) {
            $ ('#site_header').fadeIn();
             }
      }
    });
});

脚本

/* CSS will only work on screens larger than 1024px */
@media (min-width: 1024px){
 #site_header {
  display:none; 
  width:100%!important;
 }
}

jQuery(document).ready(function( $ ) {
   jQuery(window).scroll(function() {

       //Decides when this script will work 1024
      if ( $ (window).width() > 1024) {

       //How far down does the user has to scroll 100px
        if ( $ (window).scrollTop() >= 100) {
            $ ('#site_header').fadeOut();

          } else {

           if ( $ (window).scrollUp() >= 50) {
            $ ('#site_header').fadeIn();
             }
      }
    });
});

更新我将代码放在我找到的地方，并复制了有助于您理解的代码

---

基本上，我想要的是反向代码

下面是一个我认为您想要的示例：

HTML

<div id="site_header"></div>
<div id="siteBody"></div>

JavaScript+jQuery 3.3.1

jQuery(document).ready(function(e) {
console.log('document ready');

 jQuery(window).scroll(function(e) {

    console.log($(window).width());
    console.log($(window).scrollTop());
    // console.log($(window).scrollUp());

  // if ($(window).width() > 1024) {
    if ($(window).scrollTop() >= 50) {
          console.log('hide');
        $('#site_header').fadeOut();
    } else {
      if ($(window).scrollTop() < 50) {
        console.log('show');
        $('#site_header').fadeIn();
      }
    }
  // }

 });
});

jQuery（文档）.ready（函数（e）{
console.log（“文档准备就绪”）；
jQuery（窗口）。滚动（函数（e）{
log（$（window.width（））；
log（$（window.scrollTop（））；
//log（$（window.scrollUp（））；
//如果（$（窗口）.width（）>1024）{
如果（$（窗口）.scrollTop（）>=50）{
console.log（'hide'）；
$（“#站点_头”）.fadeOut（）；
}否则{
如果（$（窗口）.scrollTop（）<50）{
console.log（'show'）；
$（'site#u header'）.fadeIn（）；
}
}
// }
});
});

太好了，非常感谢您！您认为可以添加一个代码来更改滚动时文本的颜色，以及当文本位于最顶端时文本的颜色吗？