3 cara untuk menyelesaikan masalah bahawa lapisan terapung (pengepala terapung, pengaki) menyekat kandungan pada kemahiran tutorial terminal_html5 mudah alih

Dalam halaman hujung hadapan hari ini, terutamanya pada peranti mudah alih, selalunya perlu untuk menggantung atau , seperti berikut Seperti yang ditunjukkan dalam rajah.

Modul "Topik Balas" mengikuti terapung halaman dan sentiasa digantung di bahagian bawah halaman Struktur kod adalah seperti berikut.

Salin kod Kodnya adalah seperti berikut: ... Balas topik ... Untuk mencapai fungsi sedemikian, sudah tentu, anda perlu menggunakan position:fixed. Walau bagaimanapun, terdapat pepijat dalam menggunakan kedudukan: tetap Ambil terapung di bahagian bawah sebagai contoh (begitu juga dengan terapung apabila halaman meluncur ke bawah, ia keluar dari aliran dokumen biasa disebabkan kedudukan tetap , mengakibatkan beberapa kandungan dikaburkan. Seperti yang ditunjukkan di bawah:

Sebelah kiri di atas ialah paparan bermasalah, dan sebelah kanan ialah paparan biasa. Jadi, bagaimana untuk menyelesaikan masalah ini? Di sini, saya ingin mengemukakan tiga pendapat saya, berharap dapat mencari jalan yang lebih baik.

Kaedah 1. Penyelesaian Javasrript

Gunakan js untuk menyelesaikan masalah Apabila peluncur meluncur ke bahagian bawah kandungan halaman, tukar kedudukan tetap yang pada asalnya akan memisahkan diri daripada aliran dokumen kepada kedudukan relatif yang tidak terlepas daripada aliran dokumen.

Menggunakan skrip untuk menyelesaikan masalah adalah kaedah yang paling sukar Cuba untuk tidak menggunakan skrip jika ia boleh diselesaikan dengan css, tetapi ia masih merupakan kaedah.

Salin kod Kod adalah seperti berikut: //Skrol bar pada Jarak tatal paksi Y fungsi getScrollTop(){ kembalikan document.body.scrollTop; } //Jumlah ketinggian dokumen fungsi getScrollHeight(){

Kembalikan document.body.clientHeight; } //Ketinggian port pandangan penyemak imbas fungsi getWindowHeight(){ var windowHeight = 0; if(document.compatMode == "CSS1Compat") { windowHeight = document.documentElement.clientHeight; } lain { 🎜 > Kembalikan windowHeight; } //Pemantauan gelongsor window.onscroll = function(){ //Apabila meluncur ke bawah, pengaki ditetapkan ke bahagian bawah, dengan mengandaikan bahawa ketinggian 🎜> if((getScrollHeight () - getScrollTop() - getWindowHeight()) > 61) $('.footer').css('position','fixed'); $('.footer' ).css('kedudukan','relative'); }

Kaedah 2. Tambahkan padding-bottom pada badan Tambahkan atribut padding-bottom pada teg html supaya kandungan aliran dokumen biasa akan menjadi jarak yang ditetapkan oleh padding-bottom dari bahagian bawah badan. Kelemahannya ialah dengan mengambil kira penggunaan semula modul dan keperluan kerap untuk menggabungkan fail css selepas projek dilancarkan, apabila halaman lain tidak memerlukan blok terapung ini, ia akan membebankan halaman yang tidak memerlukan kedudukan tetap , yang tidak disyorkan Gunakan kaedah ini.

Salin kod

Kod tersebut adalah seperti berikut: //Anggap ketinggian ialah 60px body { padding-bottom: 60px; }

Kaedah 3. Tambah pemegang tempat adik beradik Saya secara peribadi berpendapat kaedah ini adalah yang paling praktikal Balutkan lapisan div di luar blok dan kemudian tambahkan blok ;div> blok Tetapkan pada ketinggian yang sama dengan , halaman akan meluncur ke bawah Pada asalnya, blok tuding dengan sempurna bertindih dengan blok pemegang tempat. Ia tidak akan menjejaskan halaman lain. Kodnya adalah seperti berikut: Satu-satunya kelemahan ialah ia tidak semantik dan menambah tag kosong tanpa kandungan yang besar.

Salin kod

Kod tersebut adalah seperti berikut: Balas topik Di atas adalah tiga kaedah yang saya fikirkan Saya mempunyai sedikit bakat dan pengetahuan Jika terdapat sebarang kesilapan atau kaedah yang lebih baik, sila maklumkan kepada saya.