jquery Fixed form button

Related Articles

Cara Menggunakan Vlookup Lengkap disertai dengan Contohnya

Desember 12, 2022

Penambahan AMP HTML di Blogspot Blogger

Juni 2, 2018

Debug Mode WordPress

Mei 11, 2018

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