Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mencipta Bar Navigasi Tatal Yang Melekat di Atas?

Bagaimana untuk Mencipta Bar Navigasi Tatal Yang Melekat di Atas?

Linda Hamilton
Lepaskan: 2024-11-22 14:37:17
asal
1064 orang telah melayarinya

How to Create a Scrolling Navigation Bar That Sticks to the Top?

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>
Salin selepas log masuk

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 */
}
Salin selepas log masuk

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>
Salin selepas log masuk

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%;
}
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan