Mencipta Bar Sisi Melekit dengan CSS

Bar sisi melekit ialah cara yang bagus untuk memastikan kandungan penting kelihatan semasa pengguna menatal melalui halaman web. Dalam artikel ini, kami akan meneroka cara membuat bar sisi melekit menggunakan CSS dan membincangkan beberapa sebab biasa mengapa ia mungkin tidak berfungsi seperti yang diharapkan.

Apa yang Anda Akan Pelajari

• Cara melaksanakan bar sisi melekit
• Isu biasa yang boleh menyebabkan kedudukan: melekit gagal

Langkah 1: Menyediakan HTML

Mula-mula, buat fail index.html dengan struktur asas untuk reka letak bar sisi anda:

<div class="container">
<br>
    <aside class="sidebar"><br>
        <h2 id="Sidebar">Sidebar</h2>
<br>
        <p>This is a sticky sidebar.</p>
<br>
    </aside><br>
    <main class="content"><br>
        <h1 id="Main-Content">Main Content</h1>
<br>
        <p>Lorem ipsum dolor sit amet...</p>
<br>
        <!-- Add more content to enable scrolling --><br>
    </main><br>
</div><br>

Langkah 2: Menambah CSS untuk Bar Sisi Melekit

Seterusnya, buat fail styles.css dan tambah gaya berikut:

badan {
font-family: Arial, sans-serif;
jidar: 0;
pelapik: 0;
}

.bekas {
paparan: flex;
}

.bar sisi {
kedudukan: melekit;
atas: 0; /* Bar sisi akan melekat di bahagian atas /
ketinggian: 100vh; / Ketinggian penuh port pandangan */
latar belakang: #f4f4f4;
pelapik: 20px;
}

.kandungan {
pelapik: 20px;
lentur: 1; /* Ambil ruang yang tinggal /
ketinggian: 200vh; / Jadikan kandungan cukup tinggi untuk menatal */
}

lihat sampel widget melekit

Langkah 3: Menguji Bar Sisi Melekit

Buka fail index.html anda dalam penyemak imbas web dan tatal ke bawah. Anda sepatutnya melihat bar sisi melekat pada bahagian atas port pandangan semasa kandungan utama menatal.

---

Sebab Biasa Mengapa kedudukan: melekit Mungkin Tidak Berfungsi

Jika bar sisi melekit anda tidak berfungsi seperti yang diharapkan, berikut ialah beberapa isu yang berpotensi untuk diperiksa:

• Limpahan Induk: Jika elemen induk unsur melekit mempunyai limpahan: tersembunyi, limpahan: auto, atau limpahan: tatal, gelagat melekit tidak akan berfungsi. Pastikan bekas induk membenarkan limpahan.

• Ketinggian Elemen Melekit: Elemen melekit mesti mempunyai ketinggian yang ditentukan. Jika ketinggiannya tidak ditetapkan atau kurang daripada ketinggian port pandangan, ia mungkin tidak berkelakuan seperti yang diharapkan.

• Kedudukan Salah: Sifat atas mesti ditetapkan untuk elemen melekit. Tanpanya, elemen itu tidak akan tahu di mana hendak melekat.

• Harta Paparan: Pastikan elemen melekit tidak ditetapkan untuk dipaparkan: tiada atau paparan: sebaris, kerana ini boleh mengganggu kedudukannya.

• Keserasian Penyemak Imbas: Walaupun kebanyakan penyemak imbas moden menyokong kedudukan: melekit, pastikan anda menggunakan penyemak imbas yang serasi dan semak sebarang isu khusus penyemak imbas.

---

Kesimpulan

Anda telah berjaya mencipta bar sisi melekit menggunakan CSS! Dengan memahami perangkap biasa yang boleh menghalang kedudukan: melekit daripada berfungsi, anda boleh menyelesaikan sebarang masalah yang timbul. Eksperimen dengan reka letak dan gaya yang berbeza untuk melihat cara kedudukan melekit boleh meningkatkan reka bentuk web anda.

Atas ialah kandungan terperinci Mencipta Bar Sisi Melekit dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!