Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mencipta Div Tatal yang Melekat pada Bahagian Atas Skrin?

Bagaimana untuk Mencipta Div Tatal yang Melekat pada Bahagian Atas Skrin?

DDD
DDDasal
2024-11-12 16:46:02616semak imbas

How to Create a Scrolling Div that Sticks to the Screen Top?

Mencipta Div Tatal yang Melekat pada Bahagian Atas Skrin

Apabila anda mahu elemen kekal berlabuh di bahagian atas skrin walaupun semasa tatal halaman, anda boleh membuat div "melekit". Begini caranya:

Menggunakan CSS Tulen:

.fixedElement {
    background-color: #c0c0c0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

Kaedah Ganti dengan jQuery:

Menggunakan jQuery, anda boleh mencapai kesan yang sama dengan lebih fleksibiliti. Letakkan elemen seperti berikut:

.fixedElement {
    position: absolute;
    top: 100px; // Replace with desired initial top offset
}

Kemudian, mengesan pengimbangan skrol menggunakan JavaScript:

$(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $el.css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 && isPositionFixed){
    $el.css({'position': 'absolute', 'top': '100px'}); // Adjust top offset as needed
  } 
});

Setelah mengimbangi skrol melebihi nilai yang ditentukan (200px dalam contoh ini), div akan ditetapkan di bahagian atas skrin. Apabila offset skrol jatuh di bawah nilai itu, ia akan kembali ke kedudukan asalnya.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Div Tatal yang Melekat pada Bahagian Atas Skrin?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn