Rumah > hujung hadapan web > tutorial css > Bagaimanakah cara membuat bar navigasi melekit yang melekat pada bahagian atas apabila menatal?

Bagaimanakah cara membuat bar navigasi melekit yang melekat pada bahagian atas apabila menatal?

Susan Sarandon
Lepaskan: 2024-11-19 13:40:02
asal
668 orang telah melayarinya

How do I create a sticky navigation bar that attaches to the top upon scrolling?

Membuat Bar Navigasi Melekit yang Melekat pada Bahagian Atas semasa Menatal

Masalah:

Reka bentuk bar navigasi yang diletakkan di bahagian bawah halaman yang boleh dilihat pada mulanya. Apabila pengguna menatal ke bawah, bar navigasi naik sehingga ia betul di bahagian atas halaman.

Penyelesaian:

Penyelesaian melibatkan penggunaan jQuery dan JavaScript untuk mengubah kedudukan bar navigasi berdasarkan tatal kedudukan.

Pelaksanaan:

  1. HTML:

    <div>
    Salin selepas log masuk
  2. CSS:

    #banner {
      height: 273px;
    }
    
    #nav_bar {
      height: 30px;
    }
    
    $(document).ready(function() {
      $(window).scroll(function () {
        if ($(window).scrollTop() > 550) {
          $('#nav_bar').addClass('navbar-fixed-top');
        }
        if ($(window).scrollTop() < 551) {
          $('#nav_bar').removeClass('navbar-fixed-top');
        }
      });
    });
    Salin selepas log masuk

Lagi Nota:

  • Laraskan nilai dalam JavaScript (550 dan 551) untuk memadankan kedudukan tatal yang tepat di mana bar navigasi harus diperbaiki.
  • Penyelesaian ini boleh digunakan pada elemen lain yang perlu kekal tetap pada kedudukan tatal tertentu.

Atas ialah kandungan terperinci Bagaimanakah cara membuat bar navigasi melekit yang melekat pada bahagian atas apabila menatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
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