How to make your blog Sidebar widget sticky with the help of jQuery and Css - In my previous article I already share a tutorial about "How to make any widgets sticky", You can read that article here. In previous tutorial, when the page is scrolled down then sticky widget will pass Footer Wrapper and it gets a little annoying because it hides the widget that is placed in the footer area. This tutorial is an improvement of the previous tutorial. Now your widget will never cross the footer area.
For those who want to try this function, Make sure to take a look of this Plugin by clicking on the below demo button.
After watching the demo of this function, if you're agree with it, then follow the below simple steps and make your blog widgets sticky.
How to Make Blog Widget Sticky?
At the first, visit to your blogger dashboard - Visit
Go to the "Template Editor"
Copy the below code and paste it just before the </body>
<script type='text/javascript'>
//<![CDATA[
$(function() {
if ($('#sticky-sidebar').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
var el = $('#sticky-sidebar');
var stickyTop = $('#sticky-sidebar').offset().top;
var stickyHeight = $('#sticky-sidebar').height();
$(window).scroll(function() {
var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper"
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {
el.css({
position: 'fixed',
top: 20 // Jarak atau margin sticky dari atas
});
} else {
el.css('position', 'static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({
top: diff
});
}
});
}
});
//]]>
</script>
Note- Replace the above highlighted text with your widget and footer Id. (e.g - #sticky-sidebar = Widget id which you want to make Sticky, #footer-wrapper = Set Footer ID to limit the functions of sticky widget.)
Next add the width of the widgets that made sticky with CSS.
@media only screen and (max-width:768px){
#sticky-sidebar{width:100%;max-width:100%}
}
Note - Replace the above highlighted text with your widget Id.
All done, If you face any kind of problem while making your widget sticky, then feel free to ask me via the comment section.
That's it! I hope you like this function! Stay tuned for more cool tricks! Thanks for reading +Prince Chaudhri
0 Comment to "Bug Fixed: How to Make Blog Widget Sticky"
Post a Comment