• Translate

5/26/2017

How to Create a Sticky Sidebar With CSS position: sticky

Tutorial Blogspot |

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 to Create a Sticky Sidebar With CSS position: sticky
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.

Disqus
Blogger
Comment
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

2 comments Add Comment

brother try to do it but I do not run it I did not find in my template html code the label

Reply

please choose whether the AMP template or not .. if it is not the AMP template, just search sidebar-wrapper or search almost the same code in the template blog and then put the code above between the code

Reply

Comments not appropriate topic will sign SPAM.