, ,

Make Sticky Sidebar With CSS position: sticky

Make Sticky Sidebar With CSS position: sticky Initially I was not sure if the sticky sidebar can be created with CSS. I know sticky sidebar which can only be made with javascript. Surely it difficult to blog with HTML AMP barred from using javascript own. 

Then hope emerged when looking sticky widget on the page ampbyexample.com.Then came the question, "How can a valid page AMP using sticky widget?" 

Once traced, it turns the page does not use javascript to create a sticky widget but only using CSS position: sticky; 

Out of curiosity, then I try to position: sticky; This blog Magic Company and results please refer to the sidebar on the right, please scroll to the bottom of this page, or you can try the demo at the link below. 

DEMO

How, interesting is not it? If you want to try it, please follow the tutorial below. 

Please save the CSS code below above</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 width ( width ) please adjust the width of the sidebar of each blog. If your blog is using a sticky header, please adjust the value of top suitably high sticky header let the widget is not cut off. 

But there is one thing that must be considered! If using position: sticky; then the parent div should not use the overflow .Well usually the parent div to main andaside using class='outer-wrapper' , so make sure the CSS .outer-wrapper does not use the overflow . 

Then please copy the code below 

<div id='sidebar-sticky'> 
<b:section class='sticky_sidebar' id='sticky_sidebar' preferred='yes'/>
</div> 

Then save just under the code </aside> , so the appearance 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 go to the Layout or Layout and then simply add the gadget you want to makesticky at the sticky_sidebar.