javascript - 将 fadeIn 添加到我的导航栏时出现问题

Question

我正在尝试向我的导航栏添加淡入，因此当我到达某个滚动点时，导航栏会淡入。但是，我的尝试失败了。我尝试将 Jquery 添加到常规 javascript，所以我不确定这是问题所在还是问题所在。我希望导航栏仅在到达导航栏再次出现的页面下方的滚动点时淡入。

这可以在以下位置查看:

http://realtorcatch.com/test_index

我的 Javascript 是:

window.onscroll = function() {
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
if (scrollTop >= document.getElementById("d").offsetTop) {
  document.getElementById("header").style.position = "fixed";
  document.getElementById("d").style.marginTop = "50px";
  document.getElementById("header").style.top = "0";
} else {
  $(function() { // $(document).ready shorthand
    $('#header').fadeIn('slow');
  });
document.getElementById("header").style.position = "static";
    document.getElementById("d").style.marginTop = "0px";
    document.getElementById("header").style.marginTop = "0px";
  }
}

然后我有以下 div，其中包含我的所有代码:

<div id="header">
</div>

Answer 1

首先，使用.hide() 隐藏 header ，然后调用.fadeIn() 时自动移除display: none将不透明度淡化为 100%。

$(function() { // $(document).ready shorthand
    window.onscroll = function() {
      var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

      if (scrollTop >= document.getElementById("d").offsetTop) {
        if (!$('#header').hasClass('header-fixed')) {
          $('#header').addClass('header-fixed');
          $('#header').hide().fadeIn();
          document.getElementById("header").style.position = "fixed";
          document.getElementById("d").style.marginTop = "50px";
          document.getElementById("header").style.top = "0";
        }
      } else {
        document.getElementById("header").style.position = "static";
        document.getElementById("d").style.marginTop = "0px";
        document.getElementById("header").style.marginTop = "0px";
        $('#header').removeClass('header-fixed');
      }
    }
});

https://jsfiddle.net/jonathanzuniga/ogs9cem7/