Bar Kemajuan Membaca

Coretan kod ini menambahkan bar kemajuan bacaan pada halaman web. Bar secara visual mewakili kemajuan tatal pengguna melalui kawasan kandungan utama. Mari kita pecahkan cara ia berfungsi dan perbaikinya.

Kod cuba mengira kemajuan berdasarkan kedudukan tatal berbanding jumlah ketinggian elemen main. Walau bagaimanapun, ia mempunyai beberapa isu:

• Kod Tidak Lengkap: Kod yang disediakan dipotong. Ia kehilangan bahagian penting yang sebenarnya mencipta dan mengemas kini bar kemajuan secara visual. div dicipta, tetapi tiada logik kemas kini penggayaan atau kemajuan hadir.
• Pengiraan Ketinggian Salah: Pengiraan totalHeight mungkin tidak tepat bergantung pada struktur halaman. Menggunakan outerHeight(true) termasuk margin, yang mungkin tidak diingini. Ia juga tidak mengambil kira kandungan dinamik yang mungkin mengubah ketinggian selepas pengiraan awal.
• Kekurangan Kemas Kini Kemajuan: Tiada kod untuk mengemas kini bar kemajuan semasa pengguna menatal. Pengiraan dilakukan sekali sahaja apabila dokumen sedia.
• Isu Ketinggian Pengaki: Menolak footerHeight mungkin membawa kepada pengiraan kemajuan yang salah jika pengaki dibetulkan atau bertindih dengan kandungan utama.

Berikut ialah versi yang dipertingkatkan yang menangani isu ini:

$(document).ready(function() {
  if ($('body').hasClass('single')) {
    const progressBar = $('<div id="reading-progress"></div>');
    $('header').after(progressBar);

    let totalHeight = $('main').height(); // Use height() for more accurate calculation
    let windowHeight = $(window).height();

    $(window).on('scroll', function() {
      let scrollTop = $(this).scrollTop();
      let progress = (scrollTop / (totalHeight - windowHeight)) * 100; // Adjust for window height
      progress = Math.min(progress, 100); // Cap progress at 100%
      $('#reading-progress').css('width', progress + '%');
    });
  }
});

Kod yang dipertingkatkan ini:

1. Mencipta bar kemajuan: Ia secara dinamik mencipta div dengan ID reading-progress untuk bertindak sebagai bar kemajuan.
2. Penggunaan height(): Ia menggunakan height() dan bukannya outerHeight(true) untuk pengiraan ketinggian kandungan utama yang lebih tepat.
3. Mengendalikan Acara Tatal: Ia menggunakan $(window).on('scroll', ...) untuk mengemas kini lebar bar kemajuan secara berterusan semasa pengguna menatal.
4. Mengira Kemajuan Dengan Tepat: Pengiraan kemajuan mengambil kira ketinggian tetingkap yang boleh dilihat, menghalang bar daripada melebihi 100%.
5. Menambah CSS (Diperlukan): Anda perlu menambah CSS untuk menggayakan #reading-progress div. Contohnya:

#reading-progress {
  height: 5px; /* Adjust height as needed */
  background-color: #007bff; /* Adjust color as needed */
  position: fixed;
  top: 0;
  left: 0;
  width: 0; /* Initially 0% width */
  z-index: 1000; /* Ensure it's on top */
}

Ingat untuk memasukkan jQuery dalam projek anda untuk kod ini berfungsi. Kod yang disemak ini menyediakan bar kemajuan bacaan yang lebih mantap dan tepat. Penambahbaikan lanjut boleh termasuk pengendalian sarung tepi dan menambah penggayaan yang lebih canggih.

Atas ialah kandungan terperinci Bar Kemajuan Membaca. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!