Tutorial Sticky widget for your blog or follow a scroll

Thursday, March 24, 2016

Sticky function to be sure widgets turn into sticky or float comes after the existing page scroll straight down or up.

I will share the code that's better suited mounted on all content material in the sidebar or could be installed using one particular Widget, of study course, suitable also to promote google adsense. for anybody who wish to try how exactly to follow Tutorial Sticky widget for your Blog or Follow a Scroll.

Tutorial Sticky Widget For Blog Or Follow A Scrool

1. Login to Blogger > Open Template Editor > Put CSS Code under specifically above ]]></b:skin>

.sticky {
  position:fixed;
  top:10px;
  z-index: 100;
}

Add JavaScript
Add the Code below exactly above </body>

<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML7').offset().top; 
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();     
if (scrollTop > stickyWidgetTop) { 
    $('#HTML7').addClass('sticky');
} else {
    $('#HTML7').removeClass('sticky'); 
}
};
stickyWidget();
$(window).scroll(function() {
    stickyWidget();
});
});
</script>

Change #HTML7 with Widget ID that will be made Sticky

Tutorial Sticky widget for your blog or follow a scroll

Labels