Fixed right column top after scrolling with jquery

Thông thường bạn thiết kế web có chia cột, cột trái trình bày nội dung chính của web, cột phải hiển thị các liên kết nhanh, các banner, ... Nhưng khi phần nội dung dài, khi người dùng đọc web, họ cuộn trang khi hết nội dung cột phải sẽ tạo 1 khoảng trống. Trong bài viết này tôi minh họa thủ thuật thực hiện việc fix cố định cột khi cuộn trang với jquery để cho dữ liệu hiển thị trên web của bạn không bị trống. Các bạn có thể thấy trang blog.hmclip.vn đang áp dụng điều này

Giả sử web của bạn thiết kế 2 cột với cấu chúc cơ bản như sau:

<div id="mainscrl"> Nội dung chính </div> <div id="rightscrl"> Các liên kết nhanh, Banner </div>

Khi đó để cố định cột phải khi cuộn trang bạn viết css cho rightscrl như sau

#rightscrl { position:absolute; z-index:4; awidth:300px; text-align:justify; padding-right:10px; } #rightscrl.fixed { position:fixed; bottom:50px; }

Trong mã css trên bạn chú ý: awidth:300px; là độ rộng cột phải của bạn, bạn cần thay đổi thông số này cho đúng với thiệt kế của bạn. Thuộc tính bottom:50px; trong class #rightscrl.fixed để khi cuộn cột phải không chèn lên phần footer (chân trang) của bạn, Bạn hãy điều chỉnh thông số này cho phù hợp với thiết kế của bạn. Bạn có thể coi blog.hmclip.vn làm demo

Với code jquery bạn viết như sau:

<script type="text/javascript"> $(document).ready(function() { var theLoc = $('#rightscrl').position().top; $(window).scroll(function() { if(theLoc >= $(window).scrollTop()) { if($('#rightscrl').hasClass('fixed')) { $('#rightscrl').removeClass('fixed'); } } else { if(!$('#rightscrl').hasClass('fixed')) { $('#rightscrl').addClass('fixed'); } } }); </script>