12/23/12

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

12/23/12

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="http://trollfile.googlecode.com/files/menudocblog.js">
</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 menudocblog.js 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
Tin liên quan
XEM TRÊN MOBILE

No comments:

Post a Comment

300x250