Code để giúp widget trượt theo thanh cuộn

Cho đến thời điểm này đã có ít nhất 3 bạn hỏi làm cách nào để một widget trượt theo thanh cuộn khi widget đó chạm vào điểm trên cùng (Top) của blog/website. Mình cũng đã trả lời comments cũng như email lại cho những bạn đó về vấn đề này rồi. Nhận thấy code trên tuy không phải đột phá gì nhưng cũng có một phần nào đó quan trọng đối với blog/website. Mình đưa ra một ví dụ đơn giản như nếu một bài viết trên blog quá dài, khi kéo thanh cuộn xuống thì phần bên trái/phải sẽ rất trống như vậy về phần thẩm mỹ là không ok lắm phải không? Vậy nếu luôn có một widget chạy theo thì sẽ giải quyết được vấn này rồi

Làm cách nào để thực hiện điều này?

Bước 1: Tạo widget HTML/Javascript mới
Bước 2: Sử dụng code bên dưới

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://googledrive.com/host/0Bz_65BAr9KCZRDN1Ym40U0JPdlU">
</script>
<script>
//initialize sticky content:
jQuery(document).ready(function($){
$('#samplemenu').stickyit({
gap: 5,
stickyclass: "docked"
})
})
</script>
<div id="samplemenu" class="mattblacktabs">Code của widget ở đây</div>
Bước 3: Lưu lại
Lưu ý: 
  • Bạn nên lưu lại file https://googledrive.com/host/0Bz_65BAr9KCZRDN1Ym40U0JPdlU/ và upload nên host riêng của mình để blog/website load nhanh hơn
  • Cách để upload file JS lên host miễn phí bạn tham khảo tại bài viết này
17 Comments
Comments

17 comments

cảm ơn bài viết của bạn ! Mình muốn hỏi thêm làm sao để thực hiện thủ thuật có tiêu đề widget có tên: Tìm Chúng Tôi Trên Facebook . mong bạn giúp ! x-)
code trên blog bị lỗi kìa cậu... site cậu hơi nặng đấy, tối ưu code lại đi cậu ơi
Mình có hồi âm email cho cậu rồi đó, cậu vào check mail nha
Giáng sinh đến rồi :)
Chúc bác có 1 mùa giáng sinh vui vẻ bên gia đình và người thân cheer
Giáng sinh đến rồi :)
Chúc bác có 1 mùa giáng sinh vui vẻ bên gia đình và người thân ^^!
24/12/12
Bạn tham khảo tại bài viết này
Sau đó kết hợp với code mình giới thiệu tại bài này để làm hiệu ứng trượt theo thanh cuộn blog
24/12/12
Cảm ơn, bác cũng vậy nha cheer
24/12/12
Ha ha, lỗi này mình chưa tìm cách sửa được, khi cậu up ảnh sai cú pháp lên nó bị nhu vậy :-d
24/12/12
Mình chưa nhận được email đâu ;(
Có gì send lại cho mình nhé [co="red"]huycovip.volam@gmail.com[/co]
22/2/13
Mình giải quyết được khâu xung đột rồi bạn à !trong phần code của bạn ở bên trên mình xóa cái này đi[jquery/1.6.2/jquery.min.js ]
Bây giờ cả hai cái chạy ngon lành bạn à !Bạn nên ghi thêm chú thích vô nếu ai gặp trường hợp này cũng dễ sử lý
Cảm ơn bạn rất nhiều về sự giúp đỡ ,chúc bạn luôn vui khỏe và thành đạt !
Mời bạn uống trà theo cách mà chúng tôi vẫn mời nhau khi quí mến
http://1.bp.blogspot.com/-vYy0r9Dikqw/URv8vafgJsI/AAAAAAAAApg/wfToJ7MycS0/s320/44678516_41882347_751622087.gif
15/6/13
This comment has been removed by the author.
15/6/13
Tạo tiêu đề trượt theo bài viết như haivl.com thì làm sao!?
17/6/13
Ý tưởng của bạn rất hay và bạn click vào đây để xem hướng dẫn thực hiện. Đừng quên like và share nếu bài viết hữu ích nha bạn! :d
17/6/13
Tks bạn nhé! :)
11/7/13
hình như google code ko cho up file lên nữa,..
mình vừa mới tạo 1 project, định vào upload nhưng chẳng thấy tab download đâu cả, giờ chẳng bik làm sao,...!hix! ;-(
bác nào có cách giải quyết vào giúp em với!!
11/7/13
Mình thì ko up file lên google code bằng cách đó nên cũng không biết nữa. Nhưng bạn đã thử cách này chưa?
25/1/14
Tiện ịch này hay lắm - một số trang khác cũng có tiện ích này = nhưng của họ lằng nhằn hơn - cảm ơn bài viết hay !!!

Cảm ơn bạn đã ghé thăm Troll VL !
» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>

Insert Emoticons
:cuoi
:hihi
:thank
:haha
:meu
:cry
:oaoa
1cuoi
:D
@@
:p
:o
:vi
:ko
:ca
:why
:xin
:lanh
:im
:aoi
:ado
:mda
:tat
0:khoa
a:ab
k:ac
q:ad
w:ae
e:af
l:ag
g:ah
8:ai
9:aj
9:ag
:9a
*Phải có khoảng trống trước các code mới hiển thị mặt cười


Mã Hóa Code Tạo và xem trước comments Cancel Reply
-->