Halo semua!

Atas permintaan beberapa dari Anda, saya sudah menyiapkan tutorial pendek yang harus memungkinkan Anda untuk membuat menu jejaring sosial digulir kecil hanya seperti yang Anda dapat menemukan hari ini di Mashable .

Menu ini sedikit yang secara otomatis menurunkan gerakan Anda pada halaman sebenarnya script jQuery kecil relatif sederhana.

Langkah 1: Tambahkan jQuery untuk situs Anda

Pertama, Anda harus menambahkan script jQuery di situs Anda, untuk ini Anda hanya pergi men-download versi terbaru di sini .

Langkah 2: Buat Div dan Tambahkan beberapa CSS

Untuk membuat menu kecil Anda, Anda harus membuat Div ketika Anda menetapkan kelas: 

  <div class="dd_ajax_float"> </ div>

Kemudian Anda akan membuat desain menu Anda seperti contoh berikut: 

 {Dd_ajax_float.
 background: none repeat scroll 0 0 # FFFFFF;
 border: 1px # DDDDDD padat;
 float: left;
 margin-left: 30px-;
 margin-right: 10px;
 position: relative;
 }

Langkah 3: Tambahkan script

Kita sampai pada tahap akhir! Anda hanya perlu menambahkan script berikut ke kode Anda: 


 $ (Dokumen) Siap (function (). {

 / / Masukan kelas div konten, Ketika gulir Di luar ini ada, itu mengapung
 postShare var $ = $ ('dd_ajax_float.');

 jika ($ ('dd_content_wrap.') panjang> 0.) {

 descripY var = parseInt ($ ('dd_content_wrap.') offset () atas..) - 20;
 var = $ pullX postShare.css ('margin-left');

 $ (Window). Gulir (function () {

 var scrolly = $ (window) scrollTop ().;
 var = fixedShare postShare.css $ ('posisi') == 'tetap';

 / / Pastikan Post_share ada.
 jika ($ ('dd_ajax_float.') panjang> 0.) {

 if (scrolly> && descripY fixedShare!) {
 PostShare.stop $ () Css (. {
 posisi: 'tetap',
 kiri: '50% ',
 atas: 20,
 marginLeft: -310

 });
 Lain} if (scrolly <&& descripY fixedShare) {
 $ PostShare.css ({
 posisi: 'relatif',
 kiri: 0,
 top: 0,
 marginLeft: pullX
 });
 }

 }

 });
 }

 });

Dan sekarang sudah berakhir! Tentu saja Anda bebas untuk menempatkan kode ini di manapun Anda inginkan!

Bagi mereka yang tidak ingin mengambil terlalu banyak di kepala dengan kode, ada solusi lain untuk mengintegrasikan menu ini ke blog WordPress Anda. Memang ada sebuah plugin yang disebut "Digg Digg" yang mendukung fitur ini!

Anda memutuskan apa yang paling Anda sukai!

Have Fun!

Mirip item