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 sesiapa yang boleh membantu saya dengan pengekodan atau sebarang sumber yang boleh membantu saya mencipta yang sama daripada. Jawapan anda akan banyak membantu saya.

Answer 1

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

Answer 2

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.