Adi Hari Setiawan

Cara Membuat Widget Sticky

Kode Sticky 1

<script type='text/javascript'>
//<![CDATA[
(function(e,p){e.extend({lockfixed:function(a,b){b&&b.offset?(b.offset.bottom=parseInt(b.offset.bottom,10),b.offset.top=parseInt(b.offset.top,10)):b.offset={bottom:100,top:0};if((a=e(a))&&a.offset()){var n=a.css("position"),c=parseInt(a.css("marginTop"),10),l=a.css("top"),g=a.offset().top,h=!1;if(!0===b.forcemargin||navigator.userAgent.match(/\bMSIE (4|5|6)\./)||navigator.userAgent.match(/\bOS ([0-9])_/)||navigator.userAgent.match(/\bAndroid ([0-9])\./i))h=!0;e(window).bind("scroll resize orientationchange load lockfixed:pageupdate",
a,function(k){if(!h||!document.activeElement||"INPUT"!==document.activeElement.nodeName){var d=0,d=a.outerHeight();k=a.outerWidth();var m=e(document).height()-b.offset.bottom,f=e(window).scrollTop();"fixed"!=a.css("position")&&(g=a.offset().top,c=parseInt(a.css("marginTop"),10),l=a.css("top"));f>=g-(c?c:0)-b.offset.top?(d=m<f+d+c+b.offset.top?f+d+c+b.offset.top-m:0,h?a.css({marginTop:parseInt((c?c:0)+(f-g-d)+2*b.offset.top,10)+"px"}):a.css({position:"fixed",top:b.offset.top-d+"px",width:k+"px"})):
a.css({position:n,top:l,width:k+"px",marginTop:(c?c:0)+"px"})}})}}})})(jQuery);
//]]>
</script>
<script type='text/javascript'>
if (screen.width &gt;= 768) {
(function($) {
$.lockfixed(&quot;#FollowByEmail1&quot;,{offset: {top: 42, bottom: 160}});
})(jQuery);
}
</script>

<style>
#FollowByEmail1 {display: block;max-width: 298px;}
</style>

Kode Sticky 2

<script type="text/javascript">
//<![CDATA[
$(function () {
  var offset = $("#HTML1").offset();
  var topPadding = 0;
   $(window).scroll(function () {
     if ($(window).scrollTop() > offset.top) {
       $("#HTML1").stop().animate({
         marginTop: $(window).scrollTop() - offset.top + topPadding + 0 // Setelah discroll
         })
      } else {
       $("#HTML1").stop().animate({
         marginTop: 0 // Sebelum discroll
         })
       }
    })
});
//]]>
</script>

Kode Sticky 3

<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#HTML4').length) { // Ganti "#HTML4" dengan ID widget milikmu
    var el = $('#HTML4');
    var stickyTop = $('#HTML4').offset().top;
    var stickyHeight = $('#HTML4').height();
    $(window).scroll(function() {
      var limit = $('#footer1').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer1"
      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>

Kode Sticky 4

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

<style type="text/css">
.sticky {
  position:fixed;
  top: 30px;
  z-index: 100;
  max-width: 298px;
  right: 100px;
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>