Navbar und Slide innerhalb Header in Ionic 2

Question

Ich möchte zu meinem Header Inhalt eine Folie zu machen, und wenn ich scrolle die Galerie ist ausblenden und meine Navbar ist jetzt top wie die gif. Ich brauche etwas, um die Idee zu starten, ich schätze Ihre Hilfe. Vielen Dank.

Answer 1

Diese tutorial von Josh Morony bekommen sollten Sie begonnen! Viel Spaß beim Implementieren!

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