Bagaimana untuk Mencipta Bar Navigasi Tatal Yang Melekat di Atas?

Membuat Bar Navigasi Tatal Yang Melekat di Atas

Bar Navigasi Melekit

Anda menyasarkan untuk mencipta bar navigasi yang mula-mula muncul di bahagian bawah halaman. Semasa anda menatal ke bawah, bar bergerak bersama sehingga ia mencapai bahagian atas halaman dan kekal di sana. Ini dicapai menggunakan kelas navbar-fixed-bottom dan navbar-fixed-top, masing-masing.

Menyelesaikan Isu Kod anda

Memeriksa kod yang anda berikan mendedahkan perkara berikut:

• Kelas atas tetapan navbar yang betul penggunaan
• Penyingkiran bayang-bayang yang sesuai

Walau bagaimanapun, untuk menjadikan bar berkelakuan seperti yang dikehendaki, anda perlu:

• Laraskan peletakan <div> untuk muncul di bahagian bawah halaman pada mulanya
• Tambah margin atas atau bawah yang besar pada <div> untuk menolaknya ke bawah

Pertimbangkan kod yang diubah suai berikut:

HTML Ditapis

<div>

CSS Diubahsuai

.navbar-fixed-top {
    top: 0;
    z-index: 100;
    position: fixed;
    width: 100%;
    margin-top: 800px; /* Add a sufficient margin-top to adjust the navigation bar's initial position */
}

Penyelesaian Alternatif

Jika tingkah laku bar navigasi terbina dalam Bootstrap tidak seperti yang diingini, anda boleh bertukar kepada pelaksanaan jQuery atau JavaScript yang lebih mudah:

Kod HTML

   <div>

Kod CSS

/* Initially, the nav bar is absolute, positioned at the bottom */
#nav_bar {
    position: absolute;
    bottom: 0;
}

/* When the #content is scrolled 40px, the navbar changes to fixed */
#content {
    height: 3000px;  /* Increase this to match your page content length */
    scroll: auto;
}

@media screen and (max-width: 480px) {
    #content {
        height: 8000px;
    }
}

/* This makes the navbar fixed positioned at the top, until the content is fully scrolled */
.fixed-nav {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
}

Kod JavaScript

$(window).scroll(function(){
    if ($(window).scrollTop() > 40) {
        $("#nav_bar").addClass("fixed-nav");
     } else {
         $("#nav_bar").removeClass("fixed-nav");
     }
 });
Atas ialah kandungan terperinci Bagaimana untuk Mencipta Bar Navigasi Tatal Yang Melekat di Atas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!