This time I will share a
tutorial with the same function, namely to make certain widgets become sticky
or float to follow the page when rolled down and up. This tutorial is an
improvement as well as answering comments buddy from the previous tutorial that
when the page is scrolled down sticky widget Footer Wrapper will pass and it
will be a little annoying because it hinders the widget that is placed in the
Footer area.
I will share the code that
is better suited installed on all content in the Sidebar or can be mounted on
one widget tertentu.Bagi friend who wants to try it, please follow the tutorial
* How to Make Sticky Widget in Sidebar Blog "
How to Make Sticky Widget in Sidebar Blog
1. Log in to Blogger >> Open Template
editor >> Add the
following code before the </ body>
jQuery - Go Widget
<script type='text/javascript'>
//<![CDATA[
$(function() {
if
($('#sticky-sidebar').length) { // change "#sticky-sidebar" with particular ID
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; // stopping distance in "#footer-wrapper"
var windowTop
= $(window).scrollTop();
if (stickyTop
< windowTop) {
el.css({
position:
'fixed',
top: 20
// Spacing or margin sticky from above
});
} else {
el.css('position',
'static');
}
if (limit
< windowTop) {
var diff =
limit - windowTop;
el.css({
top: diff
});
}
});
}
});
//]]>
</script>
Note the marked code,
replace the code with the ID that will be made in accordance sticky template
used
#
sticky-sidebar: ID of the content or widgets that will be
made sticky
#
footer-wrapper: Set ID to limit the functions of sticky
Next add the width of the
content or widgets that made sticky with CSS. Suppose here I give to the width
300px sticky, for example:
#sticky-sidebar{width:100%;max-width:300px}
Or
#HTML1{width:100%;max-width:300px}
Determine the width
according to the width of the sidebar on the template you are using and also do
not forget to change the width of the media specific query, for example:
CSS - Go Widget
@media only screen and
(max-width:768px){
#sticky-sidebar{width:100%;max-width:100%}
}
Sticky Widget to view the
demo, please click on the button below: "See Demo for sticky on all content sidebar"
Demo for sticky on a
particular widget See demo
Good luck......