javascript - Ionic 2 中的导航栏和标题内滑动

Question

我想让我的标题内容成为一张幻灯片，当我向下滚动时，画廊被隐藏，我的导航栏现在像 gif 一样位于顶部。 我需要一些东西来开始这个想法，我感谢你的帮助。谢谢。

Answer 1

I hope this will help you.

<header>
  <div class="header-banner">
</div>

<nav>
<ul>
  <li><a href="#">$4,456-5,778 your text</a></li>
</ul>
</nav>
</header>
<section class="content">
  <p>Here add huge dummy content to check scroll position.</p>
</section>



 header {
 height:360px;
 }
.header-banner {
 background-color: red;
 width: 100%;
 height: 300px;
 }
 .fixed-header {
  position: fixed;
  top:0; left:0;
  width: 100%; 
  }
   nav {
  width:100%;
  height:60px;
  background: #292f36;
  postion:fixed;
  z-index:10;
  }
  nav ul { 
  list-style-type: none;
  margin: 0 auto;
  padding-left:0;
  text-align:right;
  width: 960px; 
  max-width: 100%;
  }
  nav ul li { 
  display: inline-block; 
  line-height: 60px;
  margin-left: 10px;
  }
  nav ul li a {
  text-decoration: none; 
  color: #a9abae;
  }


  $(window).scroll(function(){
if ($(window).scrollTop() >= 300) {
   $('nav').addClass('fixed-header');
}
else {
   $('nav').removeClass('fixed-header');
}
});