SIDEBAR FIXED when Scrolling Down


You can arrange your blogger sidebar in several ways. Here I will show you some way of displaying sidebar as like fixed, sticky, animating. So lets see some example! Fixed Sidebar– with only CSS [See Example] jQuery Sticky Sidebar that Scrolls with Visitor! [See Example] jQuery Sticky Widget (only a specific widget will be Scroll ) [This page is a example!
  • Go to Blogger dashborad 
  •  Open Template and then click on Edit Html 
  • Template Search for tag usually found at your last part of the template 
  • Paste the following Script before the </body> Tag.

// Sticky widget by
// Tutorial at 
// Free to use or share, but please keep this notice intact.
bs_makeSticky("YOUR_WIDGET_ID"); // enter your widget ID here
function bs_makeSticky(elem) {
    var bs_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
    var width = bs_sticky.offsetWidth;
    var iniClass = bs_sticky.className + ' bs_sticky';
    window.addEventListener('scroll', bs_sticking, false);
    function bs_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if ( < 0) {
            bs_sticky.className = iniClass + ' bs_sticking';
   = width + "px";
        } else {
            bs_sticky.className = iniClass;

.bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}

Change YOUR_WIDGET_ID no with the elment ID you want to fix for example HTML1, POPULARPOST1 

0 Response to "SIDEBAR FIXED when Scrolling Down"

Post a Comment

Thanks for your valuable feedback.... We will review wait 1 to 2 week 🙏✅

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel