Make Something To Be Float

Pelanggan setia Koben ;)) ada yang bertanya ben.. gimana sih kalau mau bikin gambar yang ada di sebelah kiri terus ngikutin kalau kita scroll ke bawah? begitu kata sobat Nurmayanti Zain! Jadi mirip dengan posisi fixed di CSS. Kalau fixed berarti ketika melakukan scroll tetap dalam keadaan diam. Sedangkan sobat Nurmayanti kepingin ikut walau di scroll!
Mencari kesana kesini feature floating ternyata lumayan banyak pemakaian scriptnya. jQuery plugin juga lumayan runyem -__-' Satu solusi memakai JavaScript ternyata, yang scriptnya rada sedikitan ;) The great web dynamic drive salah satu tempat free script menuliskan tentang floating top bar! Tapi Koben lihat itu cocok untuk sobat yg mencari bagaimana membuat iklan melayang :D Jadi yg mendekati maksud dari tema postingan kali ini make something to be float jatuh pada pilihan Floating Menu Script by Dynamic Drive DHTML Scripts :-/

Kasus selesai karena sudah terjawab :P Mau jalan-jalan sebentar melihat aneka float & fixed article membuat menu dengan fixed property, float bisa hilang :D
Tidak seru yah postingannya :)) Sekarang coba bandingkan banyak mana floating menu script kreasi dynamic-drive dengan script float yg Koben temukan ketika nge-bloglang :-?

Kode CSS Float

position: absolute;
z-index: 3;
top: 50%;Silahkan kreasikan sendiri variabel CSS yang mau dipakai! Koben masukan initnya saja ;)

JavaScript Float

<script type='text/javascript'>
//<![CDATA[
var posY=333;
var chasingFactor = .05;
var updateFrequency=55;
var idleCheckFrequency=1 * 1000 ;

var yMoveTo=0;
var ydiff=0;

var b=document.getElementById("B_98");
b.style.position="absolute";
b.style.zIndex="2";
b.style.top="50%";
b.style.left="1ex";
b.style.fontSize="5ex";
b.style.color="pink";

function ff(){
   if (navigator.appName == "Microsoft Internet Explorer") {
       ydiff = yMoveTo - document.documentElement.scrollTop;
   } else {
       ydiff = yMoveTo - window.pageYOffset;
   }
   if ( Math.abs(ydiff) > 9) {
       yMoveTo -= Math.round(ydiff*chasingFactor);
       b.style.top  = (yMoveTo+posY).toString() + "px" ;
       setTimeout("ff()", updateFrequency);
   } else {
       setTimeout("ff()", idleCheckFrequency);
   }
}

window.onload = ff;
//]]>
</script>

Sisipkan script tersebut tepat diatas tagging </body>
Keterangan: "Perhatikan script yg diberi warna! Rubahlah sesuai kebutuhan."
Langkah terakhir yakni memasukan syntax HTML di dalam struktur body template!<div id="B_98"> ADD YOUR CONTETNT HERE </div>Good luck :)
Bila menemukan kembali yg lebih sedikit scriptnya, saya update postingan ini :))
Bagi para pencinta jQuery, ternyata untuk membuat sesuatu bisa menjadi float ada juga. Perhatikan langkah² berikut.

jQuery Plugin

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
        var posicion = $("#float_").offset();
        var margenSuperior = 15;
         $(window).scroll(function() {
             if ($(window).scrollTop() > posicion.top) {
                 $("#float_").stop().animate({
                     marginTop: $(window).scrollTop() - posicion.top + margenSuperior
                 });
             } else {
                 $("#float_").stop().animate({
                     marginTop: 0
                 });
             };
         });
});
//]]>
</script>

Kode CSS

#float_{
position: absolute;
padding: 5px;
top: 3px;
left: 3px;
border: 1px solid #CCC;
background-color: #FFF;
width:auto;
border-radius: 5px;
}

Markup HTML

<div id="float_">

YOUR CONTENT HERE

</div>Demonya kalian bisa melihat di sebelah kiri ada gambar favicon twitter, facebook dan orkut!
Source by: http://webintenta.com/jquery-crear-una-caja-flotante.html
Happy float \m/