Question

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

我试过这个

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

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

有人可以帮帮我吗？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 2

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

header {
    position: fixed;
}

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

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

我希望这会有所帮助

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

2 个答案: