Fixed scrolling div jquery + cssFixed/floating một đối tượng khi thay đổi vị trí thanh cuộn là một kĩ thuật khá mới nhưng nó mang lại sự trãi nghiệm một cách thú vị và hữu ích khi bạn lướt web. Google, Mediafie, ...cũng đã kết hợp kĩ thuật này với HTML5 để làm cho giao diện người vô cùng hấp dẫn. Với một chút kiến thức Jquery và Css là bạn đã hoàn toàn có thể làm được điều ấy.
Không có giới hạn nào cho việc tạo Fixed and Floating Elements khi Scrolling. Tùy mục đích, tùy từng giao diện mà việc tạo và sử dụng chúng là rất khác nhau. Song cơ bản chúng đều bắt sự kiện $window.scroll() trong bộ thư viện Jquery. Đây là Demo một ví dụ đơn giản
Sau đây s sẽ hướng dẫn các bạn thực hiện một ví dụ đơn giản , từ ví dụ này bạn có thể cải tiến để có một kết quả ưng ý nhé. Hãy bắt đầu bằng việc nhúng bộ thư viện Jquery vào nhé.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>Công việc đầu tiên là chúng ta sẽ tạo một file HTML với phần Header, Content bên trái, Sidebar bên phải và Footer ở dưới như sau:
<body>Bước tiếp theo là phần CSS:
<div class="header">This is the big boy header - Hãy kéo thanh cuộn để xem nhé</div>
<div class="content">This is the content</div>
<div class="sidebar">This is the sidebar</div>
<div class="footer">The poor footer lies here</div>
</body>
<style type='text/css'>Bạn chú ý ".sidebar.fixed với thuộc tính position:fixed" nhé. Cuối cùng là chèn vào đoạn Jquery, đây là phần quan trọng để quyết định sự hiển thị của những gì bạn đã làm.
.header{width:100%;background:red;height:80px}
.content{width:80%;background:blue;height:800px;float:left}
.sidebar{width:20%;background:yellow;height:190px;float:right}
.footer{width:100%;background:gray;height:600px;clear:both}
.sidebar.fixed{position:fixed;right:50%;margin-right:-50%}
</style>
<script type='text/javascript'>//<![CDATA[OK, vậy là bạn đã làm chủ được kĩ thuật hoàn toàn mới nữa rùi nhé.
$(window).load(function(){
/** Khai bao bien **/
$window = $(window),
$sidebar = $(".sidebar"),
sidebarTop = $sidebar.position().top,
sidebarHeight = $sidebar.height(),
$footer = $(".footer"),
footerTop = $footer.position().top,
/** Thuc thi **/
$sidebar.addClass('fixed');
$window.scroll(function(event) {
scrollTop = $window.scrollTop(),
topPosition = Math.max(0, sidebarTop - scrollTop),
topPosition = Math.min(topPosition, (footerTop - scrollTop) - sidebarHeight);
$sidebar.css('top', topPosition);
});
});//]]>
</script>
Chúc bạn thành công..
0 Nhận xét