在我的導航欄中添加fadeIn的問題

Question

我試圖在我的導航欄中添加一個fadingIn，所以當我到達某個滾動點時，導航欄就會淡入。但是，我的嘗試失敗了。 我嘗試將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()則.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/

Answer 2

您的導航欄是否已隱藏？ 由於fadeIn()方法逐漸將選定元素的不透明度from hidden to visible （漸變效果）。

如果未隱藏，請確認天氣，您要使用FadeIn或FadeOut 。