Có cài này trong web cũng hay hay nếu bạn thích thì làm theo mình hoặc lấy luôn mã nguồn về dùng luôn cũng được 
Yêu cầu:
Bạn phải biết về css nhất là kiến thức về thuộc tính position (có 2 giá trị absolute và fixed sẽ được áp dụng trong bài này)
Đầu tiên là thuật toán:
Ta sẽ lấy địa chỉ offset của thanh scroll window so sánh với địa chỉ offset của cái sidebar, nếu mà địa chỉ thanh scroll của windows lớn hơn thì ta sẽ thay đổi thuộc tính position cho cái sidebar, và nếu nhỏ hơn thì lại đưa về position ban đầu.
Khung sườn của bài viết này.
1. Tạo khung html
Ta có cái khung xương của trang:
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> <div class="wrp"> <div class="header"></div> <div style="position: relative;height: 100%"> <div class="left"></div> <div class="right">right</div> </div> <div style="clear: both"></div> <div class="footer">footer</div> </div> </body> |
2. Style CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.wrp{ margin: 0 auto; width: 1000px; height: 1500px; background: #e3e3e3 } .header{ width: 1000px; height: 100px; background: red } .right { width: 250px; height: 500px; background: #000; margin-left: 750px; position: absolute; top: 50px; } .left{ float: left; width: 700px; height: 100%; border: 1px solid #e3e3e3; } .footer{ width: 1000px;height: 420px;background: red } |
3. Viết jQuery xử lý
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script> $(document).ready(function () { var $this = $(".right"); var offset_div = $this.offset().top; $(window).scroll(function () { var wd_top = $(window).scrollTop(); if (offset_div < wd_top) { if (wd_top > 900) { $this.css({"position": "absolute", "top": "900px"}); }else { $this.css({"position": "fixed", "top": "0px"}); } } else { $this.css({"position": "absolute", "top": "50px"}); } console.log(offset_div); console.log(wd_top); }); }) </script> |
rất đơn giản phải không ạ?
Hãy đóng góp ý kiến bằng cách để lại comment!
Enjoy!
DEMO
Các bài viết không xem thì tiếc:
- Thay đổi tiêu đề, định dạng datepicker jQuery
- Siêu tổng hợp android code snippets (cập nhật thường xuyên)
- Tại sao đã thêm vào file gitignore rồi mà không có tác dụng?
- Cách gọi helper trong ruby on rails
- Tạo shortcut cho ứng dụng khi cài Android app programmatically
- Cách dump data trong Ruby
- Failed to open file error 22 mysql
- Select where like trong Ruby On Rails
- Giải phương trình bậc 2 bằng Ruby
- Làm tròn số phút lên 5 trong java
Tìm kiếm trên google và gặp bài viết của bạn |
Bạn cho mình hỏi mình đang dùng blogger | bạn có thể hướng dẫn 1 bài cho blogger chi tiết | để mình và các bạn mới biết về blogg có thêm thủ thuật và kinh nghiệm ko ?
cám ơn bạn
Hi bạn, đây là bài hướng dẫn chung còn nếu tích hợp vào blogger của google thì phải thềm vài công đoạn nữa.
Bạn có thể tham khảo thêm tại đây:
https://stackoverflow.com/questions/6449733/how-can-i-add-javascript-inside-blogger
http://imageslidermaker.com/blog/how-to-include-javascript-and-css-on-blogger
Cám ơn admin. Bài viết rất có ích. Mình xin phép được chia sẻ lại có được không ạ?
Xin mời bạn, nhưng nhớ để nguồn nhé!
Cám ơn bạn đã ghé thăm.