Sửa đối tượng lên trên cùng của cửa sổ trình duyệt khi cuộn

Tôi đã thấy gần đây một tính năng thú vị mới trong gmail mới và cũng trong bản xem trước bing HTML5 sửa một thanh điều hướng ở đầu cửa sổ trình duyệt khi cuộn. Thanh có thể bắt đầu 100px xuống dưới trang nhưng khi bạn cuộn và nó chạm đến đầu cửa sổ trình duyệt, nó sẽ sửa ở đó cho đến khi bạn cuộn lên trên nơi vị trí ban đầu được định vị.Sửa đối tượng lên trên cùng của cửa sổ trình duyệt khi cuộn

Câu hỏi của tôi là; làm thế nào tôi có thể làm điều này có hiệu lực hoặc làm một cái gì đó tương tự như hiệu ứng này?

Tôi hy vọng bạn có thể hiểu câu hỏi của tôi và những gì tôi đang cố gắng mô tả.

Nguồn

2011-08-08 Cosmo Posmo

Nếu bạn muốn phần tử để bắt đầu tiếp tục xuống trên trang, sau đó cố định ở trên đỉnh như bạn di chuyển xuống, điều này có thể là một khởi đầu tốt đẹp:

http://jsfiddle.net/cc48t/

Nguồn

2011-08-08 10:53:57

Giải pháp này nhấp nháy khủng khiếp trong mọi trình duyệt. Hầu hết các trình duyệt hiện đại đều hỗ trợ 'vị trí: cố định', đó là cách CSS thực hiện. – sohtimsso1970

Có, tôi không sử dụng giải pháp này nữa. Điều đó dựa trên kiến thức hạn chế của tôi về việc thiết lập vị trí cố định vào thời điểm đó. Các giải pháp sử dụng vị trí: cố định tốt hơn. –

Sử dụng:

#element { 
    position: fixed; 
    right: 200px; 
    top: 200px; 
}

"cố định" có nghĩa là phần tử được bố trí tương đối so với cửa sổ trình duyệt.

Nguồn

2011-08-08 10:36:56 Fasani

Bằng cách đặt vị trí của div để position:fixed

Nguồn

2011-08-08 10:38:27

Nếu trình duyệt hỗ trợ "position: fixed" đồng bằng tới javascript ví dụ là nhanh hơn:

<html> 
<head> 
<style> 
html,body { 
    margin: 0; 
} 
#navbar.navbar_fixed { 
    position:fixed; 
    top:0px; 
    width:100%; 
    height:100px; 
    background-color:#f00; 
} 
#navbar.navbar_absolute { 
    position:absolute; 
    top:100px; 
    width:100%; 
    height:100px; 
    background-color:#f00; 
} 
</style> 
<script type="text/javascript"> 

function window_onload() { 
    window.addEventListener("scroll",navbar_reset_top,false); 
} 

var navbar_top=100; 

function navbar_reset_top() { 
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 
    if(scrollTop>navbar_top&&navbar.className==="navbar_absolute") { 
    document.getElementById("navbar").className="navbar_fixed"; 
    } 
    else if(scrollTop<navbar_top&&navbar.className==="navbar_fixed") { 
    document.getElementById("navbar").className="navbar_absolute"; 
    } 
} 

</script> 
</head> 
<body onload="javascript:window_onload();"> 
<div id="navbar" class="navbar_absolute">Navigation Bar</div> 
<div style="height:2000px;background-color:#ff0;">Content</div> 
</body> 
</html>

Nguồn

2011-08-08 11:37:33

Đây là một giải pháp tốt hơn vì nó giúp loại bỏ các nhấp nháy trên gợi ý khác, mà liên tục đặt lại vị trí trên mỗi cuộn. –

tôi k bây giờ bài viết này là một chút cũ, nhưng vẫn rất hữu ích .. tôi chỉ muốn thêm một phiên bản jquery (một chút sạch hơn và cấu hình), nhưng đó là một phiên bản sửa đổi của câu trả lời Andrew D.

Trong trường hợp này tôi không có hai lớp, thay vào đó tôi có một vị trí tương đối div và khi tôi đạt đến một điểm nhất định (max_scroll) i thêm một lớp vào đối tượng, và lớp đó là cái làm cho nó nổi

Dưới đây là javascript (tất cả các chức năng thực hiện bên trong de tài liệu sẵn sàng)

<script type="text/javascript"> 
var max_scroll = 400; // this is the scroll position to start positioning the nav in a fixed way 
$(document).ready(function(){ 

     $(window).scroll(function() { 
     var navbar = $(".filterbutton"); 

     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
     if(scrollTop > max_scroll && !navbar.is(".filterbuttonFixed")) { 
       navbar.addClass("filterbuttonFixed"); 
       // console.log("go floated"); 
     } 
     else if(scrollTop < max_scroll && navbar.is(".filterbuttonFixed")) { 
       // console.log("return to normal"); 
       navbar.removeClass("filterbuttonFixed"); 
     } 

} 
}); 

</script>

và đây là nav-bar của tôi chứa div

<div id="floatable-nav-bar" class="my-relative-position-class"> 
    <nav class="page-menu"> 
     <ul class="scroll-nav"> 
      <li><a class="selected" href="#first">Section 1</a></li> 
      <li><a class="" href="#second">Section 2</a></li> 
      <li><a class="" href="#third">Section 3</a></li> 
      <li><a class="" href="#fourth">Section 4</a></li> 
     </ul> 
    </nav> 
</div>

và cuối cùng nhưng không kém, tôi nav-lơ lửng phong cách

#floatable-nav-bar.nav_floated { 
    position:fixed; 
    top:1px; 
    left: 0; 
    width:100%; 
    text-align: center; 
    background: #EEE; 
    padding: 5px 0; 
}

Tôi biết đây không phải là ví dụ đơn giản, nhưng đối với người sử dụng jQuery có lẽ đây là một phương pháp đơn giản hơn, và tôi nghĩ rằng nó tốt hơn để chỉ cần thêm và loại bỏ một lớp (ít nhất là nó đã được cho tôi).

Nguồn

2012-07-16 23:04:11 polloss

Đề xuất nhẹ: thay vì 'max_scroll = 450', bạn có thể sử dụng' max_scroll = $ ("# floatable-nav-bar"). Position(). Top'. Bằng cách này, thanh điều hướng sẽ tự động nổi khi nó đạt đến đỉnh (và việc sử dụng jQuery để tìm các tài khoản bù đắp hàng đầu cho bất kỳ biến thể nhỏ nào giữa các trình duyệt). –

Tôi cũng muốn thêm lớp học vào cơ thể cùng lúc để thêm phần đệm trên cùng của chiều cao phần tử bạn đang sửa để trang không nhảy và cuộn đẹp và mịn '$ ('body ') .addClass ("FixedElementOffset"); ' – Nickfmc

Bạn có thể làm điều đó một cái gì đó như thế này:

Example

css

body { 
    height: 3000px; 
    top: 0; 

} 
#image { 
    width: 100%; 
    background: #444; 
    height: 50px; 
} 
#scroller{ 
    height:100px; 
    background:#ccc; 
} 
.stuck{ 
    position:fixed; 
    z-index:100; 
    width:100%; 
    top:0; 
}

kịch bản

$(window).scroll(function() { 
       if ($(window).scrollTop() > 50) { 
        $('#scroller').addClass('stuck'); 
       } else { 
        $('#scroller').removeClass('stuck'); 
       } 

      });

sau khi cuộn 50 px nó sẽ thay đổi css của cuộn.

đây có thể là một khởi đầu tốt

Nguồn

2015-02-24 08:32:27 Nileshd

Thay vì sau đó xác định chiều dài cuộn, tại sao chúng ta không thể xác định vị trí của đối tượng? nói khi nó đạt đến đỉnh: 0 sau đó kích hoạt tập lệnh. Bằng cách này, nó sẽ thân thiện hơn với thiết bị.

Nguồn

2015-09-05 13:08:34

Tôi không nghĩ rằng điều này thực sự trả lời câu hỏi. Anh ta không hỏi về "xác định chiều dài cuộn" (có nghĩa là gì?) Anh hỏi làm thế nào anh ta có thể có một tiêu đề cố định. – dman2306

Sửa đối tượng lên trên cùng của cửa sổ trình duyệt khi cuộn

Trả lời

Các vấn đề liên quan