1. Hello Guest, selamat datang di Forum WinPoin. Kamu bisa bertanya, berdiskusi, sharing, dan ngobrolin apapun seputar Windows, Windows Phone, PC, Gadget, atau hal seputar Teknologi lainnya. Selamat berkomunitas! ;)

jQuery Sticky – Javascript yang membuat header atau widget terasa melayang

Discussion in 'Developer Corner' started by Ambrizal Suryadinata, May 31, 2014.

  1. Ambrizal Suryadinata

    Ambrizal Suryadinata External Team Staff Member

    Joined:
    Jan 25, 2014
    Messages:
    2,580
    Selamat Malam.

    Kadang kala kita ingin menempatkan sebuah menu dalam posisi fixed atau melayang mengikuti scroll, namun bagaimana caranya jika menu yang kita inginkan seperti diam di tempat tapi setelah pengunjung menggulung halaman ke bawah maka menu tersebut akan mengikutinya dan seolah-olah menu tersebut dalam posisi fixed.

    Disini saya akan memberikan sebuah caranya yang mungkin bisa dibilang sudah saya terapkan sendiri di blog baru saya :ketawa:.

    1. Kamu download file masternya disini

    2. Pastikan kamu sudah mempunyai file jQuery, namun jika tidak anda bisa menggunakan code ini :

    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    3. Sekarang anda tinggal merangkai code head tersebut sehingga hasilnya agak mirip seperti code dibawah ini :

    Code:
    <title>Judul Website</title>
    <head>
    <script src="jquery.js"></script>
    <script src="jquery.sticky.js"></script>
    <script>
      $(document).ready(function(){
        $("#sticker").sticky({topSpacing:0});
      });
    </script> 
    </head>
    4. Jika sudah anda harus mengetahui pamareter javascript yang sudah kamu pasangkan.

    Code:
    <script>
      $(document).ready(function(){
        $("#sticker").sticky({topSpacing:0});
      });
    </script> 
    
    <div id="sticker">
    Coba 1 2 3
    </div>
    Code (“#sticker”) memerintahkan untuk <div id=”sticker”> untuk menambahkan class baru dengan nama sticky sehimgga setelah halaman website di scroll atau di gulung maka codenya akan berubah menjadi seperti ini :

    Code:
    <script>
      $(document).ready(function(){
        $("#sticker").sticky({topSpacing:0});
      });
    </script> 
    
    <div id="sticker" class="sticky">
    Coba 1 2 3
    </div>
    ({topSpacing:0}) juga berguna untuk menambahkan padding pada daerah yang akan di sticky, topSpaccing juga bisa diganti dengan bottomSpacing, leftSpacing, dan rightSpacing yang fungsinya hampir sama dengan topSpacing namun hanya beda posisi. jika anda menggunakan topspaccing biasanya codenya akan seperti ini :

    Code:
    <script>
      $(document).ready(function(){
        $("#sticker").sticky({topSpacing:50});
      });
    </script> 
    
    <div style="position: fixed; top: 50px;" id="tabber">
    <div id="sticker" class="sticky">
    Coba 1 2 3
    </div>
    </div>
    Bagaimana mudah bukan untuk demonya sudah ada di blog saya jadi kalau ada yang KEPO bisa langsung komentar di thread ini. :ketawa:
     
  2. Jazz

    Jazz Super Moderatór Staff Member

    Joined:
    Jan 6, 2014
    Messages:
    14,731
    Kepoin Blognya deh...
    Kog Server Not Found?
     
  3. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,349
    kok blognya gak bisa dibuka ya om ? :bingung:
     

    Attached Files:

  4. Z.A.Y

    Z.A.Y Moderator Staff Member

    Joined:
    May 21, 2014
    Messages:
    1,792
    blognya berat gak ramah internet lelet :ketawa:
    [attachment=2770]
     

    Attached Files:

  5. Ambrizal Suryadinata

    Ambrizal Suryadinata External Team Staff Member

    Joined:
    Jan 25, 2014
    Messages:
    2,580
    Disini bisa kok, coba Ctrl + F5 kalau gak bisa aku kasih gambarnya aja dah.
     
  6. Ambrizal Suryadinata

    Ambrizal Suryadinata External Team Staff Member

    Joined:
    Jan 25, 2014
    Messages:
    2,580
    :ketawa: maklum bro baru masuk proses caching jadi agak lama, kalau masih baru wajar kalau udah lama gak wajar namanya.
     
  7. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,349
    masih kagak bisa... sekali buka gak ada loading tapi langsung "Server Not Found"...
    padahal kemarin kemarin sempet mampir bisa jalan...
     
  8. Ambrizal Suryadinata

    Ambrizal Suryadinata External Team Staff Member

    Joined:
    Jan 25, 2014
    Messages:
    2,580
    Iya soalnya barusan jam 12 diganti DNSnya jadi ini efeknya, saya ngirim email sampe terima email aja gak bisa apalagi websitenya.
     
  9. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,349
    ditungggu lancar aja deh... :sabarmenunggu:
    dan kapan kapan mampir
    Code:
    http://plustutorial.blogspot.com/
     
  10. marwanto.se

    marwanto.se New Member

    Joined:
    May 7, 2013
    Messages:
    7,659
    Prefix [Share] jangan lupa. :goodjob:

    Bakal cocok utk diterapkan di forum nih, biar member gak usah scroll ke atas. :ketawa:
     
  11. Febian

    Febian Administrator Staff Member

    Joined:
    May 7, 2013
    Messages:
    8,030
    Weits..mister suhu turun gunung :kagum:
    Thanks bwt share nya
    +Rep

    Gpp scroll2 terus..biar temen2 member rajin senam jari..biar jari nya sehat :ketawa:
     
  12. marwanto.se

    marwanto.se New Member

    Joined:
    May 7, 2013
    Messages:
    7,659
    :ketawa: Gak betah jadinya. :v
     

Share This Page