Bagaimana untuk Membuat Div Melekat pada Bahagian Atas Skrin pada Tatal?

Membuat Div Melekat pada Bahagian Atas Skrin pada Tatal

Pengenalan:
Ingin mencipta div yang kekal dilekatkan pada bahagian atas skrin apabila ditatal ke adalah keperluan reka bentuk web yang biasa. Kefungsian ini boleh dicapai melalui pelbagai kaedah, termasuk penentududukan CSS dan manipulasi JavaScript.

Penedudukan CSS:
Pendekatan mudah ialah menggunakan kedudukan tetap dalam CSS:

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

Dengan CSS ini, elemen akan kekal di tempat yang sama berbanding dengan skrin, tanpa mengira menatal. Walau bagaimanapun, kaedah ini mungkin tidak sesuai jika elemen perlu menukar kedudukannya secara dinamik berdasarkan kedudukan yang ditatal.

Manipulasi JavaScript:
Untuk mencipta div yang melekat pada bahagian atas hanya apabila ia telah ditatal ke, anda boleh menggunakan gabungan CSS dan JavaScript. Ideanya ialah untuk menukar kedudukan elemen daripada mutlak kepada tetap sebaik sahaja ia mencapai pengimbangan skrol tertentu:

$(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() <p>Dalam kod ini:</p>

• $el mewakili elemen dengan kelas 'fixedElement'.
• isPositionFixed menyemak jika elemen sudah ditetapkan dalam kedudukan.
• Apabila skrol mengimbangi (ditentukan oleh $(this).scrollTop()) mencapai 200px dan elemen tidak tetap, ia ditetapkan untuk ditetapkan dan diletakkan di bahagian atas.
• Apabila mengimbangi tatal jatuh di bawah 200px dan elemen dibetulkan, ia ditetapkan semula kepada asalnya kedudukan.

Pendekatan ini memberikan fleksibiliti dalam melaraskan kedudukan elemen secara dinamik berdasarkan gelagat tatal.

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