将淡入淡入添加到我的导航栏的问题答案

【问题标题】：Issues adding fadeIn to my navigation bar将淡入淡入添加到我的导航栏的问题
【发布时间】：2016-04-02 11:24:12
【问题描述】：

我正在尝试向导航栏添加淡入，因此当我到达某个滚动点时，导航栏会淡入。但是，我的尝试失败了。我尝试将 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>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您的导航栏是否已隐藏？由于fadeIn() 方法逐渐改变不透明度，对于选定的元素，from hidden to visible（淡化效果）。

如果没有隐藏，请确认您要使用的天气FadeIn 或FadeOut。

【讨论】：

导航栏在页面加载时显示。然后，当您向下滚动时，一旦您到达“d”的 div，就会出现导航栏。一旦它到达 d div，我希望它淡入淡出。
@Paul 是的，这就是我想说的......淡入，首先你的导航栏应该被隐藏......而不是只能看到淡入效果
我是第一个回答并指出问题出在哪里，但不幸的是没有投票给我:(

【解决方案2】：

首先，用.hide() 隐藏标题，然后.fadeIn() 调用会在将不透明度降低到100% 时自动删除display: none。

$(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/

【讨论】：

完美。那么添加 hasClass 有什么作用呢？我看到基本上您只需将.hide() 放在fadeIn() 之前。我也看到我不应该把它放在它的 else 区域。有没有办法让它从顶部淡入？我是javascript新手，请原谅我的无知。这需要动画功能吗？
@Paul 基本上是.hasClass() 方法检查是否有任何选定的元素具有指定的类名。如果任何被选中的元素具有指定的类名，此方法将返回“true”，因此不会在每次滚动时重复该效果。您可以使用 css opacity 属性来制作该效果，如以下示例中所示：stackoverflow.com/questions/8702329/…