I initially wasn't sure if sticky sidebar can be created with CSS. I know sticky sidebar can only be made with javascript. Of course this makes it difficult to blog with AMP banned HTML using javascript alone.
Then hope appears when viewed sticky widget on the page ampbyexample.com. Then arose the question, "How can a valid page AMP using sticky widgets?"
After your search, it turns out that page not to use javascript for creating sticky widgets but rather just using CSS position: sticky;
Out of curiosity, then I try to position: sticky; at this magical Company blog and the results have a look at the sidebar on the right, please scroll this page down, or try the demo in the link below.
How interesting, isn't it? If you want to try it out, please follow the tutorial below.
Please save the CSS code below at the top of the </head>
For the width (width) Please adjust the width of each blog sidebar. If your blog uses sticky headers, please adjust the value of the corresponding high top sticky headers let widget is not truncated.
But there is one thing to watch out for! If you use position: sticky; then the parent should not use div overflow. Well usually the parent div to main and aside this using the class = ' outer-wrapper ', so make sure in CSS. outer-wrapper doesn't use the overflow.
Then please copy code below
Then save just under code </aside>, so insubstantial as below.
Then save the template.
Please sign in to your Layout or Layout then please add a gadget that would like to be made sticky at the sticky_sidebar.
Then hope appears when viewed sticky widget on the page ampbyexample.com. Then arose the question, "How can a valid page AMP using sticky widgets?"After your search, it turns out that page not to use javascript for creating sticky widgets but rather just using CSS position: sticky;
Out of curiosity, then I try to position: sticky; at this magical Company blog and the results have a look at the sidebar on the right, please scroll this page down, or try the demo in the link below.
How interesting, isn't it? If you want to try it out, please follow the tutorial below.
Please save the CSS code below at the top of the </head>
<style type='text/css'>
#sidebar-sticky {
width: 300px;
float: right;
padding: 0;
margin: 0 auto;
position: -webkit-sticky;
position: sticky;
top: 10px;
}
</style>
For the width (width) Please adjust the width of each blog sidebar. If your blog uses sticky headers, please adjust the value of the corresponding high top sticky headers let widget is not truncated.
But there is one thing to watch out for! If you use position: sticky; then the parent should not use div overflow. Well usually the parent div to main and aside this using the class = ' outer-wrapper ', so make sure in CSS. outer-wrapper doesn't use the overflow.
Then please copy code below
<div id='sidebar-sticky'>
<b:section class='sticky_sidebar' id='sticky_sidebar' preferred='yes'/>
</div>
Then save just under code </aside>, so insubstantial as below.
<aside itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WPSideBar'>
<div id='sidebar-right'>
...........
...........
...........
</div>
</aside>
<div id='sidebar-sticky'>
<b:section class='sticky_sidebar' id='sticky_sidebar' preferred='yes'/>
</div>
Then save the template.
Please sign in to your Layout or Layout then please add a gadget that would like to be made sticky at the sticky_sidebar.
Advertisement
EmoticonEmoticon