Tab Menu

Fixed floating when Scrolling với Jquery Css

Fixed Floating Elements, jquery+css, scroll jquery, fixed floating div element when scrolling,fixed scrolling div jquery Fixed scrolling div jquery + css
Fixed/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>
<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>
Bước tiếp theo là phần CSS:
<style type='text/css'>
.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>
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.
<script type='text/javascript'>//<![CDATA[ 
$(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>
OK, vậy là bạn đã làm chủ được kĩ thuật hoàn toàn mới nữa rùi nhé.
Chúc bạn thành công..
Bạn có thể xem đoạn code hoàn chình tại đây , Demo

Hiện có 4 comments

Trao yêu thương

Cái blog mình bình luận là DEMO của ngonluanho.net, mình đang đi tìm thủ thuật cho nó. Mình định dùng mẫu mình đang dùng đây chuyển sang ngọn lửa nhỏ , nhưng làm như vậy phải làm lại SEO thì lại tốn tiền. Do vậy mình muốn làm thủ thuật này cho nó luôn,nhưng đọc mình không hiểu gì cả. Mình muốn cái sidebar bên trái đứng nguyên không di chuyển thì phải làm sao. Cảm ơn bạn

Salipro Phạm

Chào bạn! Theo mình hiểu là bạn muốn cái sidebar bên traonhauyeuthuong không còn di chuyển lúc scroll nữa đúng không? Bạn chỉ việc bỏ đi cái hiệu ứng cuộn cho thẻ div <id="divStayTopLeft" ...> ở <!--scrollleft-->

Trương Chương

Chào bạn, mình đã xem hướng dẫn của bạn xong và áp dụng vào website mình nhưng làm hoài vẫn k được, web mình là lahava.vn và mình mún fixed 2 div leftmenu và profilter đứng lại. Bạn có thể giải thích giúp mình với, hoặc liên hệ qua mail: litz.truong@gmail.com để anh em mình hợp tác về sau nhé. cảm ơn bạn!

Post a Comment

Bạn có thể tự do cho ý kiến, thảo luận về bài viết này nhưng phải theo những điều khoản sau:
- Phải nghiêm túc, không dung tục, không spam.
- Nội dung phải liên quan đến bài viết.
- Không mang tính chất chính trị...
- Hạn chế sử dụng Ẩn danh, hãy dùng Tên/URL để thay thế.
Lưu ý : Có thể sử dụng tag HTML cơ bản trong comment: br, b, i, u, a href= ...

:)
:(
;)
:D
=))
:-/
:x
I-)
@-)
=D:
:-q
:-w
[-X
B-)
:((
:-B
:-h
:x(
:-*
~O)
@};-

About

RSS
Coming soon... :))