ScrollingSidebar cho blogspot

Thứ Bảy, 8 tháng 10, 2011
Nhiều người hỏi Yolks , làm sao để có thể cho sidebar di chuyển theo thành Scrolling của trình duyệt web. Rất đơn giản nhưng chúng ta có 2 cách làm: Dùng .js hoặc css đều được . Yolks sẽ nêu 2 cách ae muốn làm sao cũng được.



Trước tiên:Xin lưu ý cách tìm ID sidebar để add thêm css vào thêm ID cho chính xác với .js

Bước 1: Dùng css
Tìm đoạn css chính của sidebar theo hình:
#sidebar{width:295px;float:right}
Thay nó thành:
#sidebar{width:295px;float:right;position: fixed;left: 50%; top: 90px;margin: 0 0 0 110px;max-height:1000px;
;}

Chỉnh lệnh left và top cho sidebar.
Lưu ý: chỉ dùng cho sidebar thứ 3 hoặc áp dụng với sidebar ngắn gọn.
Bước 2: Dùng .js:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript">
$(function() {
var offset = $("#sidebar").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#sidebar").stop().animate({
marginTop: 0
});
};
});
});
</script>
Nếu đã có:
&lt;script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'&gt;&lt;/script&gt;
Thì xóa nó đi và thay sidebar thành ID chính của blog bạn theo hình trên.

Nếu nó chạy mãi không dừng thì thêm vào css của sidebar đoạn code vd sau.
#sidebar{width:295px;float:right;max-height:1000px;}
Chỉnh thông số cho phù hợp


Copy bài viết: +A Tăng cỡ chữ =A Mặc định -AGiảm cỡ chữ

Liên hệ mail: tpm1512@yahoo.com và xem tất cả bài viết trang này Tại đây
Nhấn vào theo dõi thăm trang web của Trần Phúc Minh


  • https://yogaso1.blogspot.com/2011/10/scrollingsidebar-cho-blogspot.html
Minh cám ơn bạn đã quan tâm và rất vui vì bài viết đã đem lại thông tin hữu ích cho bạn.
Mã Hóa Code

Tổng số Bình luận [ 0]

Đăng nhận xét

Lên trên