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 Saya Ganteng Staff Member

    Joined:
    Jan 25, 2014
    Messages:
    2,592
    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:
     
    Ambrizal Suryadinata, May 31, 2014
    #1
  2. Jazz

    Jazz Windows Freak Staff Member

    Joined:
    Jan 6, 2014
    Messages:
    14,720
    Kepoin Blognya deh...
    Kog Server Not Found?
     
    Jazz, May 31, 2014
    #2
  3. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

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

    Attached Files:

    Yusril Ibnu, May 31, 2014
    #3
  4. Z.A.Y

    Z.A.Y Moderator Staff Member

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

    Attached Files:

    Z.A.Y, May 31, 2014
    #4
  5. Ambrizal Suryadinata

    Ambrizal Suryadinata Saya Ganteng Staff Member

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

    Ambrizal Suryadinata Saya Ganteng Staff Member

    Joined:
    Jan 25, 2014
    Messages:
    2,592
    :ketawa: maklum bro baru masuk proses caching jadi agak lama, kalau masih baru wajar kalau udah lama gak wajar namanya.
     
    Ambrizal Suryadinata, May 31, 2014
    #6
  7. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

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

    Ambrizal Suryadinata Saya Ganteng Staff Member

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

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    ditungggu lancar aja deh... :sabarmenunggu:
    dan kapan kapan mampir
    Code:
    http://plustutorial.blogspot.com/
     
    Yusril Ibnu, May 31, 2014
    #9
  10. marwanto.se

    marwanto.se New Member

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

    Bakal cocok utk diterapkan di forum nih, biar member gak usah scroll ke atas. :ketawa:
     
    marwanto.se, May 31, 2014
    #10
  11. Febian

    Febian Administrator Staff Member

    Joined:
    May 7, 2013
    Messages:
    8,029
    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:
     
    Febian, May 31, 2014
    #11
  12. marwanto.se

    marwanto.se New Member

    Joined:
    May 7, 2013
    Messages:
    7,653
    :ketawa: Gak betah jadinya. :v
     
    marwanto.se, May 31, 2014
    #12

Share This Page