在滚动效果jQuery上隐藏/显示标题

I'm trying to implement this https://www.invisionapp.com/ header on scroll effect but can't make it work.

我正在尝试在滚动效果上实现此https://www.invisionapp.com/标头，但无法使其正常工作。

I tried this

我试过这个

  jQuery(window).scroll(function () { 
    if (jQuery(this).scrollTop() < 200) {
      jQuery('header').hide();
    } else {
      jQuery('header').show();
    }
  });

but it doesn't work. Header doesn't appear. I found some header animations libraries that do this effect, but I want to implement it by simple jQuery code, don't want to use library.

但它不起作用。标题不会出现。我找到了一些标题动画库来实现这个效果，但我想通过简单的jQuery代码实现它，不想使用库。

Can somebody help me please?

有人可以帮帮我吗？

2 个解决方案

#1

In order for this effect to work your your header (if that's w) must be fixed so

为了使这个效果起作用，你的标题（如果那是w）必须修复

header {
    position: fixed;
}

or you can add it to your jQuery like this

或者你可以像这样将它添加到你的jQuery

    jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() < 200) {
      $('header').css('position', 'absolute');
    } else {
      $('header').css('position', 'fixed');
      jQuery('header').show();
    }
  });

I hope this helps

我希望这有帮助

#2

here is simple and pure javascript Example .

这里是简单而纯粹的javascript示例。

function scroll{
	var header = document.getElementById('header');
var ypos = window.pageYOffset;


if(ypos>600)
{
	header.style.opacity="0";
		

}
else{
	header.style.opacity="1";

}

window.addEventListener(scroll,"scroll");
}

#header{
  width:100%;
  height:50px;
  background:#333;
  }

<nav id="header">
  
  
  </nav>

#1