Cara membuat bar tajuk melekit untuk tapak web anda

Question

Saya ingin mencipta bar tajuk melekit untuk tapak web saya sama seperti pengepala melekit di tapak web ini (http://www.fizzysoftware.com/) jika ada apa-apa bantuan saya dengan pengekodan atau sebarang sumber yang boleh membantu saya mencipta perkara yang sama . Jawapan anda akan banyak membantu saya.

P粉604507867 · Answer

Jika anda mahu ia kekal melekit apabila anda menatal ke bawah ke titik tertentu, maka anda boleh menggunakan fungsi ini:

$window = $(window);
$window.scroll(function() {
  $scroll_position = $window.scrollTop();
    if ($scroll_position > 300) { // if body is scrolled down by 300 pixels
        $('.your-header').addClass('sticky');

        // to get rid of jerk
        header_height = $('.your-header').innerHeight();
        $('body').css('padding-top' , header_height);
    } else {
        $('body').css('padding-top' , '0');
        $('.your-header').removeClass('sticky');
    }
 });

dan kelas melekit:

.sticky {
  position: fixed;
  z-index: 9999;
  width: 100%;
}

Anda boleh menggunakan pemalam ini, ia mempunyai beberapa pilihan yang berguna

Tajuk Melekit jQuery

P粉265724930 · Answer

Tambah dalam CSS

position: fixed;

kepada elemen tajuk anda. Ia sangat mudah. Lain kali, cuba klik kanan sesuatu yang anda lihat di tapak web dan pilih "Periksa Elemen." Saya fikir setiap pelayar moden mempunyainya sekarang. Ciri yang sangat berguna.