How to Create a Sticky Sidebar With CSS position: sticky

Advertisement

For the bloggers will certainly experience the unwanted when making sticky on the sidebar, because usually we will use the javascript code to make sticky. Well, this time I will tell how to make Sticky in the sidebar neatly using CSS, this CSS code can also be used on Valid AMP and Non-AMP template like my template.

To view the demo please scroll my blog down and see the sidebar view that I have made sticky using this CSS code

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

Please keep the CSS code below </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 please adjust the width of each blog sidebar. If your blog using sticky header, please adjust the top value according to the height of sticky header let the widget not cut off.

But there is one thing to be aware of! If using position: sticky; Then the parent div should not use overflow. Well usually the parent div for main and aside is using class = 'outer-wrapper', so make sure the CSS .outer-wrapper does not use overflow.

Then please copy the code below

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

► For VALID AMP Templates
Then save just below the code </aside>, so it looks like below

<asideitemprop='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>

► For Non-AMP Templates
Please place the code above between the sidebar-wrapper code

<div id ='sidebar-sticky'> //sticky opener
<b: section class ='sticky_sidebar' id ='sticky_sidebar' choice ='yes' />
<aside id ='sidebar-wrapper'> ... </aside>
</div> //sticky cover

Then save the template.
Please go to Layout then please add gadgets that want to be made sticky in the sticky_sidebar.

Found an article helpful? Donate via Paypal