Alhamdulillah. Bismillah. Underground404 - Position Relative Berubah Menjadi Fixed saat discrollkan kebawah. Oke, malam tanggal 18 Juni 2012 ini. Saya mau share tentang postion yang berubah jadi fixed saat discroll-kan kebawah. Tentunya masih bingung dengan maksud artikelposition relative berubah menjadi Fixed saat discrollkan kebawah. Untuk liat demonya bisa dilihat google custom search saya diatas :)
Script
jQuery(document).ready(function(){
var jQwadah = jQuery("#cas");
var jQluhur = jQwadah.offset().top;
var jQatur = jQuery(document);
jQuery(window).scroll(function() {
cicing = jQatur.scrollTop() - jQluhur;
if(cicing < 0)
jQwadah.offset({top: jQluhur});
else
jQwadah.offset({top: jQatur.scrollTop() + 5});
});
});
CSS
/* CSS widget posisi 1/2 Fixed */
#cas {
background:#fff;
border: 2px solid #999;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
z-index:9999;
margin:0 0 5px 0;
}
#cas:before {
content:"";
width:0px;
height:0px;
position:absolute;
bottom:100%;
left:20px;
border-width:10px;
border-style:solid;
border-color:transparent transparent #999 transparent;
display:block;
}
HTML
<div id='cas'>
<!--isi widget-->
</div>
jQuery(document).ready(function(){
var jQwadah = jQuery("#ID_WIDGET");
var jQluhur = jQwadah.offset().top;
var jQatur = jQuery(document);
jQuery(window).scroll(function() {
cicing = jQatur.scrollTop() - jQluhur;
if(cicing < 0)
jQwadah.offset({top: jQluhur});
else
jQwadah.offset({top: jQatur.scrollTop() + 5});
});
});
Semoga bermanfaat dan juga membantu. Mungkin kalau belum berhasil ada script pemanggil jQuerynya yang belum terpasang. Bisa dibaca artikel terkait dengan pemasangan pemanggil jQuery[Link]. Alhamdulillah.
source code by [Link]
