I am trying to display a header only when the user scrolls up, for that, I managed to get it to work after the user has started scrolling.
However, the header is displayed on the load time event because of amp's on="enter..." action. I tried to find a way to hide it based on the position of another element but I can't get it to work with the functions available on amp which seem to only be something like height, width etc... Which is not what I want.
- I wanted to display the
headerbased on the Y position of.spacerelement.
This is what I have been able to come up with so far:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="https://www.ampstart.com/templates/article.amp">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async="" src="https://cdn.ampproject.org/v0.js"></script>
<script custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js" async></script>
<script custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js" async></script>
<style amp-custom>
body {
font-family: Helvetica, sans-serif;
}
main {
padding: 10px;
max-width: 412px;
margin: auto;
}
header {
width: 100%;
padding: 10px 0;
background: #fff;
top: 0;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
position: relative;
transform: translateY(-100%);
}
header h1 {
font-size: 30px;
text-indent: 40px;
font-weight: bold;
margin: 0;
}
.spacer {
height: 100vh;
width: 100%;
background-image: -webkit-linear-gradient(#EEE 50%, white 50%);
background-image: linear-gradient(#EEE 50%, white 50%);
background-size: 100% 3em;
transform: translateY(-60px);
}
#marker {
position: relative;
/*top: 50px;*/
width: 0px;
height: 0px;
}
</style>
</head>
<body>
<header>
<h1>Show Header</h1>
</header>
<amp-animation id="hideAnim" layout="nodisplay">
<script type="application/json">
{
"easing": "ease-out",
"duration": "500ms",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [{
"selector": "header",
"keyframes": [{
"transform": "translateY(-60px)"
},
{
"transform": "translateY(0)"
}
]
}
]
}
</script>
</amp-animation>
<amp-animation id="scrollToAnim"
layout="nodisplay">
<script type="application/json">
{
"easing": "ease-in",
"duration": "0",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [{
"selector": ".spacer",
"keyframes": [{
"transform": "translateY(-60px)"
},
{
"transform": "translateY(0)"
}
]
}]
}
</script>
</amp-animation>
<main>
<!-- Invisible 0x0px marker div that sits 100px off the top -->
<div id="marker">
<amp-position-observer on="enter:hideAnim.start; exit:hideAnim.start, hideAnim.reverse, scrollToAnim.start;" layout="nodisplay">
</amp-position-observer>
</div>
<div id="default" class="spacer"></div>
<div class="spacer"></div>
</main>
</body>
</html>I do not want to see header after the onload event. Currently it shows the following after page load:
As you can see, the header is overlayed in the back.
- I don't want to see the header on load time.
Any help or pointing me in the right direction is greatly appreciated.