End of Page Slide Out Box plus Minimize use jQuery

Mau ora geuleum gue akan berbagi trik jQuery plugin. Salah satu tema post yang habisnya rada susah. Selalu saja ada yg baru dan menggemaskan 8-X Coba sobat kunjungi artikel lawas berikut end of page slide out box dan slide out serelek geleser! Kedua trick tersebut memiliki fungsi yg hampir mirip. Ketika melakukan scroll-down pada satu halaman, maka akan terbuka sebuah kotak dengan gaya serelek jebret ;)) Sekarang AA Koben akan berbagi hal serupa dengan hal itu, namun ada penambahan gaya yakni selain fitur close akan ditambahkan juga feature minimize pada kotak! Pokok'e begitu...

#sticky {
background: #f9f9f9;
border-radius: 3px;
width: 350px;
height: 200px;
position: fixed;
overflow: hidden;
border: none;
right: -350px;
z-index: 9999;
text-align: left !important;
box-shadow: 0 0 1px rgba(0,0,0,.5);
transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
}
.sticky-title {
background: #333;
color: #fff;
display: block;
height: 40px;
width: 100%;
font-size: 14px;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
.sticky-title span a {
border-left: 1px solid #555;
float: right;
height: 40px;
width: 40px;
}
.sticky-title span a:hover {
background: rgba(0,0,0,.2);
}
.sticky-title span a img {
margin: 12px;
}
.sticky-container {
border: none;
float: left;
width: 100%;
height: auto;
margin: 3px;
}
.sticky-container > div {
border: none;
height: 40px;
margin: 3px;
padding: 3px;
}
.sticky-container > div > span {
font-size: 14px;
}
.sticky-container img {
float: left;
margin: 3px 5px;
width: 40px;
}
.show {
bottom: 35px;
}
.hide {
bottom: -160px;
}

Kalau mau di edit perhatikan nominal height and width (tinggi dan panjang), karena akan berpengaruh kepada hide/show content :D

<div class='show' id='sticky'>
<div class='sticky-title'>
<span style='float: left;margin: 12px 0 0 15px;'>
YOUR TITTLE!!!
</span>
<span>
<a href='javascript:void;' id='sticky-close' title='Tutup'>
<img alt='x' class='a' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijZxBmhl9G_c-agtJmGw0rD_EWtrV9-WfdEOHiVw0QPY4ofe_33hhGXR1CSowxHJbRa6ybVAS8sJ-RupTQCZN0AJnn_9MbWqchaglq1Ze5NeQUIQNYoeEBmRZddfFMx9RH4Efie_dqCStd/s1600/close.png' title='close'/>
</a>
</span>
<span>
<a href='javascript:void;' id='sticky-minimize' title='Minimize'>
<img alt='-' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhesc6Nkcnza-UFFgZs1UGnB-W3VYHIo86uZVcdH1lLGxmiQjTm6kOkMDS5Uuddkj1hxNdjuVuz0EFSfGsWAnNvAyMjj7rPVrLshjzGEavcpqjJRUG0NnMdq6TFH3fBRlZ00eXMBSRgjd2E/s1600/minimize.png' title='minimize'/>
</a>
</span>
<span>
<a href='javascript:void;' id='sticky-maximize' title='Maximize'>
<img alt='+' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsNesLNgUQojhiPdWOEsCmgYZbn4IF4Sn9h9XKrRkyve87kHvl6USREqIAJkXF8vJQSAE87bkLjF_jMY4U19QrNdeHoN86-ZfV_ojjKz4QwPd6-YnLCeYYZyzTy9cTzASqBqP4vx7geNTG/s1600/maximize.png' title='maximize'/>
</a>
</span>
</div>
<div class='sticky-container'>
<div>
---------- ADD CONTENT HERE ----------
</div>
<div>
---------- ADD CONTENT HERE ----------
</div>
<div>
---------- ADD CONTENT HERE ----------
</div>
</div>
</div>

<script type='text/javascript'>
$(window).scroll(function(){
  if ($(this).scrollTop() > 350) {
    $('#sticky').css({'right':'0px'});
  } else {
    $('#sticky').css({'right':'-350px'});
  }
});
$(document).ready(function(){
    var sticky = $('#sticky');
    var closed  = $('#sticky-close');
    var minimize = $('#sticky-minimize');
    var maximize = $('#sticky-maximize');
        maximize.hide();
            closed.click(function(){
              sticky.css({'right':'-350px'});
                          sticky.fadeOut('slow');
  })
        minimize.click(function(){
              sticky.toggleClass('hide');
$(this).hide();
        maximize.show();
})
        maximize.click(function(){
              sticky.toggleClass('hide');
$(this).hide();
        minimize.show();
})
});
</script>

350 : batas tinggi kemunculan ketika scroll.
DEMO

jsfiddle.net/bebenkoben/v3bhqq9r/show

Happy jQuery \m/