Cách jQuery đơn giản nhất để có một vị trí: cố định (luôn ở đầu) div là gì?

Question

Tôi tương đối mới với jQuery, nhưng cho đến nay những gì tôi đã thấy tôi thích. Những gì tôi muốn là cho một div (hoặc bất kỳ yếu tố nào) để được trên đầu trang như thể "vị trí: cố định" làm việc trong mọi trình duyệt.

Tôi không muốn điều gì đó phức tạp. Tôi không muốn các hacks CSS khổng lồ. Tôi thích nếu chỉ sử dụng jQuery (phiên bản 1.2.6) là đủ tốt, nhưng nếu tôi cần jQuery-UI-core, thì cũng tốt thôi.

Tôi đã thử $ ("# topBar"). ScrollFollow(); < - nhưng điều đó đi chậm ... Tôi muốn một cái gì đó xuất hiện thực sự cố định.

Answer 1

Sử dụng HTML này:

<div id="myElement" style="position: absolute">This stays at the top</div> 

Đây là javascript bạn muốn sử dụng. Nó gắn một sự kiện vào cuộn cửa sổ và di chuyển phần tử xuống xa như bạn đã cuộn.

$(window).scroll(function() { 
    $('#myElement').css('top', $(this).scrollTop() + "px"); 
}); 

---

Như đã chỉ ra trong các ý kiến ​​dưới đây, nó không được khuyến khích để đính kèm các sự kiện cho sự kiện cuộn - khi người dùng cuộn, nó cháy rất nhiều, và có thể gây ra vấn đề hiệu suất. Hãy cân nhắc sử dụng nó với plugin debounce/throttle của Ben Alman để giảm chi phí.

Answer 2

Đẹp! Giải pháp của bạn là 99% ... thay vì "this.scrollY", tôi đã sử dụng "$ (window) .scrollTop()". Thậm chí tốt hơn là giải pháp này chỉ yêu cầu thư viện jQuery1.2.6 (không cần thư viện bổ sung).

Lý do tôi muốn phiên bản đó đặc biệt là bởi vì đó là những gì tàu với MVC hiện tại.

Dưới đây là các mã:

$(document).ready(function() { 
    $("#topBar").css("position", "absolute"); 
}); 

$(window).scroll(function() { 
    $("#topBar").css("top", $(window).scrollTop() + "px"); 
}); 

Answer 3

Trong một dự án, khách hàng của tôi muốn có một hộp trôi nổi trong div khác, vì vậy tôi sử dụng thuộc tính CSS margin-top chứ không phải là hàng đầu để hộp nổi tôi lưu trú tại của nó cha mẹ.

Answer 4

Đối với những trình duyệt hỗ trợ "position: fixed", bạn có thể chỉ cần sử dụng javascript (jQuery) để thay đổi vị trí thành "fixed" khi cuộn. Điều này giúp loại bỏ sự tăng vọt khi cuộn bằng các giải pháp $ (window) .scroll (function()) được liệt kê ở đây.

Ben Nadel chứng tỏ điều này trong hướng dẫn của mình: Creating A Sometimes-Fixed-Position Element With jQuery

Answer 5

Đối với bất cứ ai vẫn đang tìm kiếm một giải pháp dễ dàng trong IE 6. Tôi tạo ra một plugin để xử lý các vị trí trình duyệt IE 6: cố định vấn đề và rất dễ sử dụng: http://www.fixedie.com/

Tôi đã viết nó nhằm cố gắng bắt chước sự đơn giản của belatedpng, nơi những thay đổi duy nhất cần thiết là thêm tập lệnh và gọi nó.

Answer 6

HTML/CSS Cách tiếp cận

Nếu bạn đang tìm kiếm một lựa chọn mà không đòi hỏi nhiều JavaScript (và và tất cả những vấn đề mà đi kèm với nó, chẳng hạn như các cuộc gọi sự kiện cuộn nhanh), nó có thể đạt được cùng một hành vi bằng cách thêm một wrapper <div> và một vài kiểu.Tôi nhận thấy di chuyển mượt mà hơn nhiều (không có yếu tố tụt hậu so với) khi tôi sử dụng các phương pháp sau đây:

JS Fiddle

HTML

<div id="wrapper"> 
    <div id="fixed"> 
    [Fixed Content] 
    </div><!-- /fixed --> 
    <div id="scroller"> 
    [Scrolling Content] 
    </div><!-- /scroller --> 
</div><!-- /wrapper --> 

CSS

#wrapper { position: relative; } 
#fixed { position: fixed; top: 0; right: 0; } 
#scroller { height: 100px; overflow: auto; } 

JS

//Compensate for the scrollbar (otherwise #fixed will be positioned over it). 
$(function() { 
    //Determine the difference in widths between 
    //the wrapper and the scroller. This value is 
    //the width of the scroll bar (if any). 
    var offset = $('#wrapper').width() - $('#scroller').get(0).clientWidth; 

    //Set the right offset 
    $('#fixed').css('right', offset + 'px');​ 
}); 

Tất nhiên, phương pháp này có thể được sửa đổi để di chuyển các vùng có được/mất nội dung trong suốt thời gian chạy (điều này sẽ dẫn đến việc thêm/xóa thanh cuộn).