导航栏和幻灯片里面的标题Ionic 2

Question

我想让我的标题内容是一张幻灯片，当我向下滚动屏幕时，隐藏和我的导航栏现在是顶部现在像gif。 我需要一些东西来启动这个想法，我感谢你的帮助。谢谢。

Answer 1

这tutorial由Josh Morony应该让你开始！玩得开心！

Answer 2

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'); 
} 
});