Home / Pemprograman / jquery Fixed form button

jquery Fixed form button

Hampir 1 bulan tanpa update article neh… karena kesibukan diarena nyata :).

Iseng saya bermain – main dengan Magento (Portal Ecommers yang bagus menurut saya) silahkan coba (Install) bila kalian berminat. yang membuat unik dimana tombol Save, Cancel, Back dll di buat Fixed alias Tetap pada tempatnya walaupun kita scroll sampai halaman tersebut berhenti, Nah untuk itu saat ini kita akan membuatnya tentunya dengan Bantuan Jquery.

Untuk lebih jelasnya silahkan lihat dibawah :

// Fungsi untuk memetakan tinggi dah lebar Suatu Halaman Website saat diScroll

function getScrollY() {
              var scrOfY = 0;
              if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
                scrOfY = document.body.scrollTop;
              } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
                scrOfY = $.scrollTop();
              }else{
                  scrOfY = window.pageYOffset;
              }
              return scrOfY;
            }
           
            $(document).ready(function(){
                var Y;
                var topheigth=’50’;
               
                $(‘#cancel’).click(function(){
                    $(‘:input’).val(”);
                    $(‘:textarea’).val(”);
                });
               
                $(window).scroll(function () {   
                    Y = getScrollY();
                    if(Y >= topheigth){ //bila scroll telah mencapai 50px tampilkan #toolbar2 yg di Hidden
                        $(‘#toolbar2’).fadeIn(400);
                    }else{
                        $(‘#toolbar2’).fadeOut(400);
                    }
                });
            });

Pada Demo Script silahkan scroll untuk melihat effect yang di Timbulkan

 DEMO | DOWNLOAD

About Administrator

2016-01-12 10:32:36 2016-01-12 14:33:42

Check Also

Multi php.ini pada webserver

PHP ya,  mungkin saat ini pemrograman web yang paling banyak digunakan, mungkin karena mudah cara …

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *