Advertisement
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.