Cara membuat bar sisi melekit pada tatal di bootstrap

Cara paling mudah untuk membuat sidebar melekit dengan bootstrap adalah menggunakan kelas melekit terbina dalam dengan mengimbangi atas. 1. Tambah kelas melekit atas pada elemen pembungkus kandungan bar sisi dan tetapkan gaya = "atas: 20px;" untuk mengelakkan bertindih dengan kepala; 2. Pastikan bekas induk (seperti Col-MD-3) tidak mempunyai gaya yang mempengaruhi tingkah laku melekit, seperti limpahan: tersembunyi; 3. 4. Jika anda perlu bersesuaian dengan pelayar lama atau kawalan dinamik, anda boleh menggunakan JavaScript untuk mendengar acara menatal dan beralih ke kelas tetap, tetapi disyorkan untuk menggunakan hanya skim melekit asli dalam pelayar moden, tanpa JS tambahan, prestasi dan kesederhanaan yang lebih baik.

Mewujudkan sidebar melekit di bootstrap adalah mudah, terutamanya dengan kelas terbina dalam Bootstrap dan sedikit CSS atau JavaScript untuk kawalan. Berikut adalah cara anda boleh melaksanakan bar sisi yang tetap dilihat sebagai pengguna menatal halaman.

Gunakan kelas position-sticky bootstrap

Cara paling mudah untuk membuat sidebar melekit di bootstrap adalah dengan menggunakan kelas utiliti position-sticky . Ini berfungsi dengan baik dalam pelayar moden dan memerlukan kod minimum.

1. Struktur HTML Asas

 <div class = "container-fluid">
  <div class = "row">
    <!-sidebar melekit->
    <div class = "col-md-3">
      <div class = "sticky-top" style = "top: 20px; latar belakang: #f8f9fa; padding: 20px; ketinggian: 100vh;">
        <h5> sidebar </h5>
        <ul class = "nav flex-column">
          <li class = "nav-item"> <a class = "nav-link" href = "#"> link 1 </a> </li>
          <li class = "nav-item"> <a class = "nav-link" href = "#"> link 2 </a> </li>
          <li class = "nav-item"> <a class = "nav-link" href = "#"> link 3 </a> </li>
        </ul>
      </div>
    </div>

    <!-kandungan utama->
    <div class = "col-md-9">
      <h1> Kandungan Utama </h1>
      <p> tatal ke bawah untuk melihat tongkat bar sisi ke atas ... </p>
      <!-tambah kandungan yang cukup untuk membolehkan menatal->
      <div style = "Height: 1500px;">
        <p> Kandungan panjang di sini untuk mencetuskan menatal. </P>
      </div>
    </div>
  </div>
</div>

2. Titik utama untuk menjadikannya berfungsi

• Gunakan sticky-top pada elemen dalaman (bukan lajur itu sendiri).
• Tambah offset top menggunakan style="top: 20px;" Jadi bar sisi tidak melekat tepat di bahagian atas viewport (mengelakkan tumpang tindih header).
• Pastikan lajur induk ( col-md-3 ) tidak mempunyai overflow: hidden atau serupa yang boleh mengganggu tingkah laku melekit.
• Secara pilihan menetapkan ketinggian tetap atau padding (seperti height: 100vh ) untuk mengelakkan awal yang tidak menentu jika kandungan pendek.

Sesuaikan tingkah laku dengan CSS (pilihan)

Jika anda memerlukan lebih banyak kawalan, gunakan CSS tersuai:

 .Sidebar-sticky {
  Kedudukan: -Webkit -sticky;
  Kedudukan: melekit;
  Atas: 20px;
  Ketinggian: 100VH;
  limpahan-y: auto;
}

Sapukan kelas ini dan bukannya sticky-top :

 <div class = "col-md-3">
  <div class = "sidebar-sticky">
    <!-kandungan bar sisi->
  </div>
</div>

Ini berguna apabila anda mahu membenarkan menatal di bar sisi sendiri jika lebih lama daripada viewport.

Pertimbangan dan petua

• Versi Bootstrap : Ini berfungsi dalam Bootstrap 4 dan 5.
• Reka bentuk responsif : Pada skrin yang lebih kecil, anda mungkin mahu melumpuhkan tingkah laku melekit. Gunakan kelas responsif seperti d-none d-md-block jika diperlukan.
• Konflik : Elakkan menggunakan transform , filter , atau perspective pada elemen induk - mereka boleh melumpuhkan position: sticky .
• Prestasi : position: sticky adalah pelaku dan asli kepada penyemak imbas, jadi tiada JavaScript diperlukan dalam kebanyakan kes.

Pilihan: JavaScript Fallback (jarang diperlukan)

Jika anda perlu menyokong penyemak imbas yang lebih tua atau menambah tingkah laku dinamik (seperti menghentikan keletihan pada titik tertentu), anda boleh menggunakan JavaScript:

 const sidebar = document.QuerySelector ('. Sidebar-sticky');
const offsettop = sidebar.offsettop;

window.onscroll = function () {
  jika (window.pageyoffset> = offsettop) {
    sidebar.classlist.add ('tetap-atas');
  } else {
    sidebar.classlist.remove ('tetap-atas');
  }
};

Dan tambah kelas .fixed-top dengan CSS:

 .fixed-top {
  Kedudukan: Tetap;
  Atas: 20px;
  Lebar: 25%; / * Laraskan berdasarkan lajur anda */
}

Tetapi pendekatan ini lebih kompleks dan kurang dipercayai daripada position: sticky .

Dalam kebanyakan kes, hanya gunakan sticky-top dengan offset top . Ia mudah, bersih, dan disokong sepenuhnya dalam susun atur moden.

Pada asasnya, itu sahaja yang diperlukan - tiada plugin, tiada JS yang kompleks.

Atas ialah kandungan terperinci Cara membuat bar sisi melekit pada tatal di bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!