Mình đang dùng 996 Grid cho trang Tuyển sinh. Trong thiết kế thì mình có nhu cầu đặt một cái menu ở cột bên trái mà khi cuộn trang thì nó luôn ở vị trí cố định.
Chuyện này thì Tây nó gọi là “sticky sidebar”.
Ban đầu thì mình Google và dùng hàm animate(), tất nhiên là jQuery. Nhưng cái này nó rất là gây mất tập trung. Chuyển sang giải pháp thay đổi giá trị “margin-top” thì nó lại giật giật, rất khó chịu. Tìm hiểu kĩ hơn thì thấy nhiều nơi dùng trò “position: fixed; top: 0“, chạy êm ru.
Nhưng khốn nỗi là cái thằng 996 Grid này lại toàn là “position: relative” (Mình dek hiểu lắm, toàn đi học mót nên không biết diễn đạt thế nào cho sáng gọn).
Thật may là cũng tìm ra cách định nghĩa lớp CSS theo kiểu “on the fly”.
// Sticky sidebar for Grid 996 framework
jQuery(function() {
var $sidebar = jQuery("#program_sidebar"),
$window = jQuery(window),
offset = $sidebar.offset(),
topPadding = 20;
// Define css style on the fly
var cssRules = function() {
sidebarLeft = $sidebar.parent().offset().left + "px";
sidebarWidth = $sidebar.parent().width() + "px";
rules = "position:fixed; top: " + topPadding + "px; left: " + sidebarLeft + "; width: " + sidebarWidth;
jQuery("<style type=’text/css’> .fixed { " + rules + "} </style>").appendTo("head");
}
cssRules();
// Re-define css style when resizing browser window
jQuery(window).resize(function() {
cssRules();
});
// Scroll it! Fix its position!
$window.scroll(function() {
if ($window.scrollTop() > offset.top && $window.width() > 767 ) {
$sidebar.addClass("fixed");
} else {
$sidebar.removeClass("fixed");
}
});
});Xem ứng dụng thực tế trên tuyensinh.ussh.edu.vn.
Tuy hơi củ chuối. Nhưng với mình, miễn nó chạy là được.
Nhân tiện, chuẩn đầu ra cho ngành Ngôn ngữ học cần phải được bổ sung, cụ thể là phần “2.2.4. Kĩ năng tin học và công nghệ” phải có thêm kĩ năng sử dụng jQuery 😆