Điều được gắn thẻ mạng

Xin chào tất cả mọi người!

Theo yêu cầu của một số bạn, tôi đã chuẩn bị một hướng dẫn ngắn mà sẽ cho phép bạn tạo ra một menu mạng xã hội cuộn chỉ như một trong những bạn có thể tìm thấy ngày hôm nay trên Mashable .

Menu này ít có thể tự động làm giảm chuyển động của bạn trên trang web thực sự là một kịch bản jQuery nhỏ tương đối đơn giản.

Bước 1: Thêm jQuery vào trang web của bạn

Trước tiên, bạn phải thêm đoạn mã jQuery trên trang web của bạn, điều này, bạn chỉ cần tải về phiên bản mới nhất tại đây .

Bước 2: Tạo một Div và một số CSS.

Để tạo menu nhỏ của bạn, bạn phải tạo một Div khi bạn chỉ định một lớp học:

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

Sau đó, bạn sẽ tạo ra các thiết kế thực đơn của bạn như ví dụ sau đây:

 {Dd_ajax_float.
 background: không lặp lại di chuyển 0 0 # FFFFFF;
 border: 1px solid # dddddd;
 float: left;
 margin-left: 30px;
 margin-right: 10px;
 vị trí: tương đối;
 } 

Bước 3: Thêm các kịch bản

Chúng tôi đến giai đoạn cuối cùng! Bạn chỉ cần có thêm đoạn mã sau vào mã của bạn:

 $ (Tài liệu) đã sẵn sàng (function () {

 / / Đặt lớp div nội dung, Khi di chuyển Ngoài này, nó nổi
 postShare var = $ ('dd_ajax_float.');

 if ($ ('dd_content_wrap.) chiều dài> 0) {

 descripY var = parseInt ($ ('dd_content_wrap.) bù đắp () trên.) - 20;
 var = $ pullX postShare.css (margin-left ');

 $ (Cửa sổ). Di chuyển (function () {

 var scrolly = $ (cửa sổ) scrollTop ().;
 var = $ fixedShare postShare.css == 'cố định' ('vị trí');

 / / Hãy chắc chắn rằng Post_share tồn tại.
 if ($ ('dd_ajax_float.') chiều dài> 0) {

 if (scrolly> các & fixedShare descripY!)
 PostShare.stop $ () Css (.
 vị trí: 'cố định',
 còn lại: '50% ',
 top: 20,
 marginLeft: -310

 });
 } Khác nếu (scrolly <& descripY fixedShare) {
 $ PostShare.css ({
 vị trí: 'tương đối'
 bên trái: 0
 top: 0
 marginLeft: pullX
 });
 }

 }

 });
 }

 });

Và bây giờ nó là hơn! Tất nhiên bạn phải đặt mã này ở bất cứ nơi nào bạn muốn!

Đối với những người không muốn mất quá nhiều vào người đứng đầu với mã, có một giải pháp tích hợp menu này để blog WordPress của bạn. Thật vậy, có một plugin gọi là "Digg Digg" hỗ trợ tính năng này!

Bạn quyết định những gì bạn thích nhất!

Have Fun!