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
But there is one thing to be aware of! If using
Then please copy the code below
Then save just below the code
Please place the code above between the
Please go to Layout then please add gadgets that want to be made sticky in the sticky_sidebar.
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 TemplatesPlease 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
Disclaimer: Images, Content of articles or videos that exist on the web sometimes come from various sources of other media. Copyright is fully owned by the source. If there is a problem with this matter, you can contact us here.
<strong></strong>
or<b></b>
.<em></em>
or<i></i>
.<u></u>
.<strike></strike>
.<code></code>
or<pre></pre>
or<pre><code></code></pre>
, and please parse the code in the parser box below.