Hy Folks, In this episode, we go over a common navigation trick used for the mobile web, sticky headers and footers. Learn how to make your sticky header and footer float on and off the screen while scrolling in AMP ЁЯСЙЁЯП╗ This video will be very helpful for those peoples who do not know about the How to hide sticky headers and footers on scroll. You already know AMP is a Google product and very lightweight and better for the performance of the website that's why lots of companies using these features. because it can make an awesome User Interface and make a better user experience.
Usage
The amp-fx-collection component provides a collection of preset visual effects, such as parallax that can be easily enabled on any element via attributes.
Apply visual effects
To specify a visual effect for an element, add the amp-fx attribute with the value of the visual effect.
So let's Create the AMP Sidebar.
Note- Please do follow All the Steps.
Watch Video Click here
Download Source Code - ЁЯСЗ
Step 1 -
Required Script inside the head section
<script async custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js"></script>
Step 2 -
Create header and footer in the body tag
Header -
add attribute amp-fx in header element and its value float-in-top as you can see below in header element.
<header class="header" amp-fx="float-in-top">
<div role="button" tabindex="0" on="tap:side-bar.open" class="menu">☰</div>
<div class="site-name">Hello Folks</div>
</header>
Output -
Footer -
<footer class="footer" amp-fx='float-in-bottom'>
Hy I am AMP Footer
</footer>
Output -
Finally, we have made the amp sticky header and footer on scroll.
Your final AMP HTML page should look like this.ЁЯСЗ
Copy the below Final HTML and Paste it into your Page.
<!DOCTYPE html>
<html amp>
<head>
<title>Hy i am AMP page</title>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="http://localhost/Tutorials/AMP/amp_erro.html">
<meta name="viewport" content="width=device-width">
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<script async custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js"></script>
<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>
<style amp-custom> body { width: auto; margin: 0; padding: 0; } header { background: Tomato; color: white; font-size: 2em; text-align: center; } h1 { margin: 0; padding: 0.5em; background: white; box-shadow: 0px 3px 5px grey; } p { padding: 0.5em; margin: 0.5em; } .carousel_dots{ text-align: center; } .current { background: #6e6e6e; } button { margin: 0 3px; border: solid 1px #ccc; height: 8px; border-radius: 100%; padding: 0 3px;}.headerbar { height: 50px; position: fixed; z-index: 999; top: 0; width: 100%; display: flex; align-items: center; }.site-name { margin: auto; }
.menu {
padding-right: 320px;
}
.sidebar {
padding: 10px;
margin: 0;
}
.sidebar > li {
list-style: none;
margin-bottom:10px;
}
.sidebar a {
text-decoration: none;
}
.close-sidebar {
font-size: 1.5em;
padding-left: 5px;
}
.header{
overflow: hidden;
position:fixed;
top: 0;
}
.footer{
overflow: hidden;
position: fixed;
bottom: 0;
background: Tomato;
color: white;
font-size: 3em;
text-align: center;
}
</style>
</head>
<body>
<header class="header" amp-fx="float-in-top">
<div role="button" tabindex="0" on="tap:side-bar.open" class="menu">☰</div>
<div class="site-name">Hello Folks</div>
</header>
<amp-sidebar id="side-bar" layout="nodisplay">
<nav>
<div role='button' tabindex="0" on="tap:side-bar.close">X</div>
<ul>
<li><a href="hash">Example 1</a></li>
<li><a href="hash">Example 2</a></li>
<li><a href="hash">Example 3</a></li>
<li><a href="hash">Example 4</a></li>
</ul>
</nav>
</amp-sidebar>
<article>
<h1>You are Watching AMP Serires </h1>
<h1>Today we will learn How to hide sticky headers and footers on scroll in AMP Pages </h1>
</article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor, ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor, ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor, ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum
<footer class="footer" amp-fx="float-in-bottom">
Hy I am AMP Footer
</footer>
</body>
</html>
This video will help you -
FAQ -
Q. AMP course for beginners?
A. AMP course is available on youtube click here
Q. What is AMP and AMP introduction?
A. AMP is an open-source framework for reading more click here
Q. How to fix the AMP error?
A. You can find AMP error and resolve them using 3 methods click here
Q. How add an amp-carousel?
A. amp-carousel is a very attractive thing for any site for see more click here
Q. How to amp sidebar?
A. amp-sidebar is a very attractive thing for any site for see more click here
Yeah! You have learned ЁЯШК
I hope you understood this and like this article. if you like it so, please give feedback in the comment section.
If you have any query, feel free to ask me ЁЯШК
If any mistakes I made here, so please let me know and improve me.
Recommended Post
- String Function in PHP
- How to Submit Registration and Login Form in PHP?
- How to Get All Google play store apps List using PHP Scraper?
- How to pass a variable from the command line using PHP?
- How to Submit Registration and Login Form in PHP?
- Introduction PHP ?
- How to pass variable from command line using PHP?
- How to get meta tags in 2 easy way in PHP
- How to Reset DropDownList Selection Using jQuery
Post a Comment
Please do not enter any spam link in the comment section.