Scroll Hidden use jQuery Plugin

Setelah disibukan oleh hack threaded comment terbaru, gonta-ganti sana-sini dan ternyata berjalan, walaupun ada bentrok dengan script snippet yg lainnya :D Sampai kelupaan cari bahan postingan karena menerapkan hack tersebut pada dua blog saya ;))
Sekarang Beben Koben si bloglang anu ganteng kalem tea akan berbagi trick jQuery Plugin seputaran something on float. Kalian sobat mungkin pernah melihat link share dengan keadaan fixed, jika di scroll diam di tempat. Kalau posisinya pas dan tidak mengganggu pemandangan tidak ada masalah! Jika posisi keberadaannya terlalu ke tengah, tentu saja akan mengganggu penglihatan si pengunjung ;) Untuk mengakali itu semua, mari kita buat pemecahannya dengan full stylish :p

Pertama-tama backup Full Download Template kalian. Cari kode ]]></b:skin> tepat diatasnya masukin bumbu CSS berikut

#outnav {
position: fixed;
left: 0;
top: 99px;
z-index: 9999;
}
#outnav .contain {
margin: 0 auto;
width: 75px;
}
#outnav ul {
height: auto;
list-style: none outside none;
padding: 0;
width: 75px;
}
#outnav ul li {
display: inline;
float: right;
margin: 5px 10px;
}
#outnav a {
background: transparent;
color: #FAFAFA;
float: right;
height: 30px;
}

Perhatikan unik ID atribut CSS, jika ada yg sama pada template kalian, silahkan ganti saja ;) Karena trick jQuery plugin, harus ada script inti<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>Jangan di pasang bila sudah ada!

Markup HTML

<div id='outnav'>
<div class='contain'>

<ul>
<li>
<a href='http://www.delicious.com/YOUR-ACCOUNT' target='new'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-6CVU4bko-83WHSkaR7Krgu0o__Lz6r1x-zI9iRaSXsYilBXGouX9azZxU77lN9LufBLu3Gjtg1w9VGDQ0A6sblMeXBUfmt0K7T2dckPlTtfdpNL3FP9K9t-Ip9n4SZctde73VTuXIqE/s1600/Delicious.png' title='Follow us at Delicious'/></a>
</li>
<li>
<a href='http://digg.com/raezen' target='new'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK45xVmpJ8vfkODvO6aG1yOvTUhrdGSD3TW_qOvGypMRObG6Geo3_gA1uOPmTEvKEcnV54I17gMhMXiBti_ySQiHhEcMuGI859SJJ1_6AghrAxkT_hV6umKhZwLRzuGUQ5bIVowwm__OI/s1600/Digg.png' title='Follow us at Digg'/></a>
</li>
<li>
<a href='http://www.facebook.com/pages/YOUR-ACCOUNT' target='new'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib66pp-L4hQuOpttWf95R7ugBn2DwXHKD7hj5JyXJIhis-gkUAS5wDMWSlUHFZFUwhe9Bmn7LVnbVfJeLWRnbonyDqjeU__-1A1roV5UbTI67zHaxUD4vI4ecaQ4DGRsXmJbFSaV8qPuA/s1600/Facebook.png' title='Follow us at Facebook'/></a>
</li>
<li>
<a href='http://www.stumbleupon.com/stumbler/YOUR-ACCOUNT/' target='new'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWcZ-W2URtd-vAjlH1T5bV_tllDy6GEDPfI8iDZ8WtG_fpo1ULq0NuUvL7wcjaBc4Hj7YdpH5gs0bMPDb_oJOzuWjJm5hYXEevqVIlqNBZ5RxQ-SiVeXj7tjdgCKbCJd3UhTA1UYfkqKg/s1600/StumbleUpon.png' title='Follow us at StumbleUpon'/></a>
</li>
<li>
<a href='http://twitter.com/YOUR-ACCOUNT' target='new'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnitaEI69d_wkQdTyp7LRPyK5kUSozDbiuH8i0RtdlkFjsvyRBZIYarC9kIAf5xXDaTgAZY-487FGA4AyMaUhEAMpzAB8Oq2d5j3xCQFFsiy8SxzuQY8e0mhyxFGVHEHpIJZG7jvd-EHg/s1600/Twitter.png' title='Follow us at Twitter'/></a>
</li>
</ul>

</div>
</div>

jQuery Plugin

<script type='text/javascript'>
//<![CDATA[
  jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() !== 0) {
      jQuery('#outnav').fadeIn();
    } else {
      jQuery('#outnav').fadeOut();
    }
  });
//]]>
</script>

SAVE.
Dengan begitu saja kalian sudah mempunyai trik apabila kita scroll ke atas, maka akan menghilang. Lakukan scroll mouse pada demo

http://jsbin.com/ikawox

Apakah cuma segitu!!! Oh nooo, kurang style dong ah :)) Kemon lanjut...

Versi pertama cuma hidden ketika kita sudah melakukan scroll sekali saja. Dan itupun masih terlihat sesuatunya (link share)! Gantikan jQuery pluginnya saja oleh sobat dengan ini ya

<script type='text/javascript'>
//<![CDATA[
$(function() {
   $(window).scroll(function(){
 var scrollTop = $(window).scrollTop();
 if(scrollTop !== 0)
 $('#outnav').stop().animate({'opacity':'0.2'},500);
 else 
 $('#outnav').stop().animate({'opacity':'1'},500);
 });
 $('#outnav').hover(
function (e) {
 var scrollTop = $(window).scrollTop();
 if(scrollTop !== 0){
$('#outnav').stop().animate({'opacity':'1'},500);
 }
 },
function (e) {
 var scrollTop = $(window).scrollTop();
 if(scrollTop !== 0){
$('#outnav').stop().animate({'opacity':'0'},500);
  }
 }
 );
});
//]]>
</script>

DONE.

http://jsbin.com/ekuges

Silahkan mau pakai yg mana ;;)
Happy jQuery \m/