Help required from people working on Google-AMP. I am trying to hide the navbar while scrolling down. and if while scrolling up show it again. I'm trying to hide header
<nav id="navToHide">Nvabar</nav>
AMP Animation Code my shote:
<amp-animation id="hideNav" layout="nodisplay">
<script type="application/json">
{
"duration": "200ms",
"fill": "forwards",
"iterations": "1",
"direction": "alternate",
"animations": [{
"selector": "#navToHide",
"keyframes": [{
"transform": "translateY(-180px)"
}]
}]
}
</script>
</amp-animation>
AMP position observer code:
<amp-position-observer on="enter:select-item1.start" layout="nodisplay"></amp-position-observer>
I wanna make something similar to navbar hide on scrolling. Like this example below. https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp
I'm trying to avoid javascript
Theres a really simple way to do this using the amp-fx-collection's float-in attribute.
Add the required <amp-fx-collection> script to the head of the page:
<script async custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js"></script>
And apply the amp-fx='float-in-top' attribute to your <nav> element.
You can see it demonstrated in this video: