Question

我正在尝试将fadeIn添加到导航栏，这样当我到达某个滚动点时，导航栏会淡入。但是，我的尝试失败了。我尝试将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()调用会在将不透明度淡化为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/

Answer 2

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

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

将fadeIn添加到导航栏

2 个答案: