Gunakan pemerhati persimpangan untuk mencapai kesan mengecut dinamik bar navigasi semasa menatal

Artikel ini memperincikan cara menggunakan API Observer Intersection JavaScript dan CSS untuk melaksanakan bar navigasi responsif yang secara automatik menyusut apabila halaman ditatal. Dengan memantau perubahan penglihatan di kawasan tertentu, ketinggian bar navigasi dan saiz elemen dalaman (seperti logo) akan diselaraskan secara dinamik untuk mengoptimumkan pengalaman pengguna pada peranti mudah alih dan tablet dan meningkatkan profesionalisme dan keramahan pengguna laman web.

Pengenalan

Dalam reka bentuk web moden, bar navigasi (NAVBAR) merupakan bahagian penting dalam interaksi antara pengguna dan laman web. Untuk memberikan pengalaman pengguna yang lebih lancar, terutamanya pada peranti mudah alih dan tablet, ia adalah corak reka bentuk yang biasa dan efisien untuk bar navigasi untuk mengecilkan dan mengurangkan ketinggiannya secara automatik, mungkin mengecil logo, apabila pengguna menatal ke halaman. Reka bentuk ini bukan sahaja menjimatkan ruang skrin tetapi juga membolehkan pengguna memberi tumpuan lebih kepada kandungan sambil mengekalkan ciri navigasi yang sedia ada. Artikel ini akan menerangkan secara terperinci bagaimana menggunakan API Observer Persimpangan yang digabungkan dengan CSS untuk mencapai kesan penyusutan dinamik ini.

Konsep Teras: API Observer Persimpangan

Kesan bar navigasi tradisional biasanya bergantung pada mendengar peristiwa tatal. Walau bagaimanapun, acara tatal boleh dicetuskan beberapa kali dalam masa yang singkat, mengakibatkan overhead prestasi yang besar, terutamanya pada peranti mudah alih. API Observer Persimpangan menyediakan penyelesaian yang lebih cekap dan moden.

Observer Persimpangan membolehkan kita secara tidak sengaja memerhatikan perubahan dalam keadaan persimpangan elemen sasaran dan unsur nenek moyangnya (atau dokumen Viewport). Ia tidak mencetuskan setiap kali anda menatal, tetapi hanya mencetuskan fungsi panggil balik apabila elemen sasaran memasuki atau meninggalkan kawasan yang ditentukan, sehingga mengurangkan beban prestasi. Ini menjadikannya sesuai untuk kesan seperti bar navigasi yang mengecut apabila menatal.

Langkah pelaksanaan

Melaksanakan bar navigasi yang mengecut apabila menatal terutamanya termasuk tiga bahagian: struktur HTML, gaya CSS dan logik JavaScript.

1. Penyediaan Struktur HTML

Pertama, kita memerlukan struktur HTML yang jelas, termasuk bar navigasi itu sendiri dan kawasan kandungan permulaan yang merupakan sasaran pemerhatian. Bar navigasi biasanya adalah elemen atau , yang mengandungi logo dan item navigasi lain.

 


    <meta charset="utf-8">
    <meta name="viewport" content="width = peranti-lebar, skala awal = 1.0">
    <tirly> secara dinamik mengecilkan bar navigasi 
    <link rel="stylesheet" href="style.css">


    <header>
        <div class="logo"> Logo laman web </div>
        <av>
            
            <ul>
                <li> <a href="#home"> home </a> </li>
                <li> <a href="#about"> tentang kami </a> </li>
                <li> <a href="#perkhidmatan"> Perkhidmatan </a> </li>
                <li> <a href="#contact"> Hubungi </a> </li>
            </ul>
        
    </av></header>

    <seksyen id="Home">
        <h1> Selamat datang ke laman web kami </h1>
        <p> tatal ke bawah untuk melihat lebih banyak </p>
    </seksyen>

    <seksyen id="Mengenai">
        <h2> tentang kami </h2>
        <p> Berikut adalah beberapa maklumat mengenai kami ... </p>
    </seksyen>

    <seksyen id="Perkhidmatan">
        <h2> Perkhidmatan kami </h2>
        <p> Kami menyediakan pelbagai perkhidmatan berkualiti ... </p>
    </seksyen>

    <seksyen id="Hubungi">
        <h2> Hubungi kami </h2>
        <p> tidak sabar untuk mendengar daripada anda ... </p>
    </seksyen>

    <script src="script.js"> </script>

</tirly>

Dalam struktur ini:

• Elemen berfungsi sebagai bekas bar navigasi kami.
• mewakili logo laman web.
• adalah kawasan kandungan pertama di bahagian atas halaman kami, dan kami akan menontonnya bersilang dengan viewport untuk mencetuskan bar navigasi untuk mengecut.

2. Definisi Gaya CSS

CSS bertanggungjawab untuk menentukan gaya awal bar navigasi, gaya runtuhnya, dan peralihan lancar antara kedua -duanya.

 /* Reset Universal*/
* {
    Margin: 0;
    Padding: 0;
    saiz kotak: kotak sempadan;
    Garis besar: Tiada;
    Teks-penyerapan: Tiada;
    Senarai gaya: Tiada;
}

/*Gaya asas bar navigasi*/
header {
    Kedudukan: Tetap; /* Tetap di bahagian atas viewport*/
    Atas: 0;
    Kiri: 0;
    Lebar: 100%;
    Ketinggian: 70px; /* ketinggian awal*/
    latar belakang warna: #232323; /* warna latar*/
    box-shadow: 0 2px 5px rgba (0, 0, 0, 0.2); /* Kesan bayangan*/
    Paparan: Flex;
    Align-item: pusat;
    Justify-Content: Space-antara;
    Padding: 0 20px;
    Peralihan: Semua 0.3s mudah-dalam-keluar; /* Peralihan lancar untuk semua perubahan atribut*/
    Z-indeks: 1000; /* Pastikan bar navigasi berada di bahagian atas*/
    Warna: #Dad7D7; /* warna teks*/
}

header .logo {
    saiz font: 30px; /* Saiz fon logo awal*/
    Font-Weight: Bold;
    Peralihan: Saiz fon 0.3s mudah-dalam-keluar; /* Peralihan lancar saiz fon logo*/
}

header nav ul {
    Paparan: Flex;
    Gap: 20px;
}

header nav ul li a {
    Warna: #Dad7D7;
    saiz font: 18px;
    Peralihan: Warna 0.3s mudah-dalam-keluar;
}

header nav ul li a: hover {
    Warna: #ffffff;
}

/ * Bar navigasi menyusut gaya negara */
header.Nav-Scrolled {
    Ketinggian: 45px; /* Ketinggian selepas pengecutan*/
    latar belakang warna: RGBA (35, 35, 35, 0.9); /* Latar belakang separa telus*/
    latar belakang penapis: blur (5px); /* Kesan kaca beku*/
}

header.nav-scrolled .logo {
    saiz font: 20px; /* Saiz fon logo setelah mengecut*/
}

/*Gaya kawasan kandungan*/
Bahagian {
    Ketinggian: 100VH; /* Setiap bahagian menduduki ketinggian viewport*/
    Paparan: Flex;
    flex-arah: lajur;
    Align-item: pusat;
    Justify-Content: Center;
    saiz font: 2EM;
    Warna: #FFF;
    Teks-Align: Pusat;
    padding-top: 70px; /* Meninggalkan ketinggian bar navigasi*/
}

#home {
    latar belakang warna: #1A1A1A;
}

#about {
    latar belakang warna: #333333;
}

#Services {
    latar belakang warna: #444444;
}

#contact {
    latar belakang warna: #555555;
}

Mata Utama:

• Header menetapkan kedudukan: Tetap dan Peralihan: Semua 0.3s mudah-dalam-keluar untuk mencapai kedudukan tetap dan peralihan lancar semua perubahan atribut.
• .logo juga menetapkan peralihan untuk memastikan saiz logo berubah dengan lancar.
• Kelas .NAV yang ditandakan mentakrifkan gaya bar navigasi selepas ia menyusut, termasuk saiz fon ketinggian dan logo yang lebih kecil.

3. Logik interaksi JavaScript

Bahagian JavaScript bertanggungjawab untuk mendengar kawasan #Home menggunakan pemerhati persimpangan dan menambahkan atau mengeluarkan kelas .NAV yang digulung untuk

apabila ia meninggalkan viewport.

 // Dapatkan elemen dom header = document.QuerySelector ('header');
const SectionHome = document.QuerySelector ("#home"); // Perhatikan elemen sasaran // pilihan konfigurasi pemerhati persimpangan const seksyenHomeHomeOptions = {
  rootmargin: "-200px 0px 0px 0px" // Margin 200px teratas bermakna ia mencetuskan apabila bahagian atas #Home adalah 200px dari viewport};

// Buat contoh pemerhati persimpangan Const SectionHomeObserver = New IntersectionObserver (Fungsi (Fungsi (Fungsi
  penyertaan,
  pemerhati // contoh pemerhati itu sendiri) {
  entri.Foreach (entry => {
    // Apabila elemen #Home tidak lagi memotong viewport (iaitu skrol di bawah kawasan #Home)
    jika (! entry.isintersecting) {
      header.classlist.add ("nav-scrolled"); // tambah kelas yang boleh dikurangkan} else {
      // Bila #Home Elemen merentasi Viewport (iaitu skrol kembali ke kawasan #Home)
      header.classlist.remove ("nav-scrolled"); // Keluarkan kelas yang dikutuk}
  });
},
SectionHomeOptions); // Gunakan pilihan konfigurasi // mula memerhatikan #Home Element SectionHomeObserver.observe (SectionHome);

Penjelasan kod:

• Header dan SectionHome merujuk kepada bar navigasi dan seksyen rumah sebagai sasaran pemerhatian masing -masing.
• SectionHomeOptions mentakrifkan rootmargin: "-200px 0px 0px 0px". Ini bermakna pemerhati persimpangan akan menyala apabila bahagian atas elemen bahagian adalah 200px dari bahagian atas viewport. Jika rootmargin adalah 0px, ia hanya akan terbakar apabila SectionHome sepenuhnya keluar dari viewport. Dengan menyesuaikan nilai ini, anda boleh mengawal bagaimana awal bar navigasi mengecut.
• Fungsi panggil balik IntersectionObserver akan menerima array penyertaan, yang mengandungi maklumat persimpangan semua elemen yang diperhatikan. Kami melangkah ke atas penyertaan dan periksa entri.
• Jika entry.Isintersecting adalah benar, ini bermakna bahawa SectionHome telah meninggalkan Viewport (atau kawasan yang ditakrifkan oleh Rootmargin), dan pada masa ini kami menambah kelas Nav-Scrolled ke tajuk.
• Sebaliknya, jika kemasukan.
• Akhirnya, hubungi SectionHomeObserver.Observe (SectionHome) untuk mula memerhatikan elemen bahagianHome.

Kod contoh

Simpan kod HTML, CSS dan JavaScript di atas sebagai index.html, style.css dan script.js masing -masing dalam direktori yang sama.

index.html

 


    <meta charset="utf-8">
    <meta name="viewport" content="width = peranti-lebar, skala awal = 1.0">
    <tirly> secara dinamik mengecilkan bar navigasi 
    <link rel="stylesheet" href="style.css">


    <header>
        <div class="logo"> Logo laman web </div>
        <av>
            <ul>
                <li> <a href="#home"> home </a> </li>
                <li> <a href="#about"> tentang kami </a> </li>
                <li> <a href="#perkhidmatan"> Perkhidmatan </a> </li>
                <li> <a href="#contact"> Hubungi </a> </li>
            </ul>
        
    </av></header>

    <seksyen id="Home">
        <h1> Selamat datang ke laman web kami </h1>
        <p> tatal ke bawah untuk melihat lebih banyak </p>
    </seksyen>

    <seksyen id="Mengenai">
        <h2> tentang kami </h2>
        <p> Berikut adalah beberapa maklumat mengenai kami ... </p>
    </seksyen>

    <seksyen id="Perkhidmatan">
        <h2> Perkhidmatan kami </h2>
        <p> Kami menyediakan pelbagai perkhidmatan berkualiti ... </p>
    </seksyen>

    <seksyen id="Hubungi">
        <h2> Hubungi kami </h2>
        <p> tidak sabar untuk mendengar daripada anda ... </p>
    </seksyen>

    <script src="script.js"> </script>

</tirly>

style.css

 /* Reset Universal*/
* {
    Margin: 0;
    Padding: 0;
    saiz kotak: kotak sempadan;
    Garis besar: Tiada;
    Teks-penyerapan: Tiada;
    Senarai gaya: Tiada;
}

/*Gaya asas bar navigasi*/
header {
    Kedudukan: Tetap; /* Tetap di bahagian atas viewport*/
    Atas: 0;
    Kiri: 0;
    Lebar: 100%;
    Ketinggian: 70px; /* ketinggian awal*/
    latar belakang warna: #232323; /* warna latar*/
    box-shadow: 0 2px 5px rgba (0, 0, 0, 0.2); /* Kesan bayangan*/
    Paparan: Flex;
    Align-item: pusat;
    Justify-Content: Space-antara;
    Padding: 0 20px;
    Peralihan: Semua 0.3s mudah-dalam-keluar; /* Peralihan lancar untuk semua perubahan atribut*/
    Z-indeks: 1000; /* Pastikan bar navigasi berada di bahagian atas*/
    Warna: #Dad7D7; /* warna teks*/
}

header .logo {
    saiz font: 30px; /* Saiz fon logo awal*/
    Font-Weight: Bold;
    Peralihan: Saiz fon 0.3s mudah-dalam-keluar; /* Peralihan lancar saiz fon logo*/
}

header nav ul {
    Paparan: Flex;
    Gap: 20px;
}

header nav ul li a {
    Warna: #Dad7D7;
    saiz font: 18px;
    Peralihan: Warna 0.3s mudah-dalam-keluar;
}

header nav ul li a: hover {
    Warna: #ffffff;
}

/ * Bar navigasi menyusut gaya negara */
header.Nav-Scrolled {
    Ketinggian: 45px; /* Ketinggian selepas pengecutan*/
    latar belakang warna: RGBA (35, 35, 35, 0.9); /* Latar belakang separa telus*/
    latar belakang penapis: blur (5px); /* Kesan kaca beku*/
}

header.nav-scrolled .logo {
    saiz font: 20px; /* Saiz fon logo setelah mengecut*/
}

/*Gaya kawasan kandungan*/
Bahagian {
    Ketinggian: 100VH; /* Setiap bahagian menduduki ketinggian viewport*/
    Paparan: Flex;
    flex-arah: lajur;
    Align-item: pusat;
    Justify-Content: Center;
    saiz font: 2EM;
    Warna: #FFF;
    Teks-Align: Pusat;
    padding-top: 70px; /* Meninggalkan ketinggian bar navigasi*/
}

#home {
    latar belakang warna: #1A1A1A;
}

#about {
    latar belakang warna: #333333;
}

#Services {
    latar belakang warna: #444444;
}

#contact {
    latar belakang warna: #555555;
}

script.js

 // Dapatkan elemen dom header = document.QuerySelector ('header');
const SectionHome = document.QuerySelector ("#home"); // Perhatikan elemen sasaran // pilihan konfigurasi pemerhati persimpangan const seksyenHomeHomeOptions = {
  rootmargin: "-200px 0px 0px 0px" // Margin 200px teratas bermakna ia mencetuskan apabila bahagian atas #Home adalah 200px dari viewport};

// Buat contoh pemerhati persimpangan Const SectionHomeObserver = New IntersectionObserver (Fungsi (Fungsi (Fungsi
  penyertaan,
  pemerhati // contoh pemerhati itu sendiri) {
  entri.Foreach (entry => {
    // Apabila elemen #Home tidak lagi memotong viewport (iaitu skrol di bawah kawasan #Home)
    jika (! entry.isintersecting) {
      header.classlist.add ("nav-scrolled"); // tambah kelas yang boleh dikurangkan} else {
      // Bila #Home Elemen merentasi Viewport (iaitu skrol kembali ke kawasan #Home)
      header.classlist.remove ("nav-scrolled"); // Keluarkan kelas yang dikutuk}
  });
},
SectionHomeOptions); // Gunakan pilihan konfigurasi // mula memerhatikan #Home Element SectionHomeObserver.observe (SectionHome);

Nota dan pengoptimuman

1. Kelebihan Prestasi : Observer Persimpangan mempunyai kelebihan prestasi yang signifikan ke atas pendengar acara tatal. Ia hanya mencetuskan panggilan balik apabila keadaan persimpangan elemen sasaran dan perubahan unsur akar, mengelakkan pengiraan yang kerap dan operasi DOM, menjadikan halaman menatal lebih lancar.
2. Penggunaan fleksibel rootmargin : Dengan menyesuaikan nilai rootmargin, anda boleh mengawal masa pemicu bar navigasi. Sebagai contoh, menetapkannya kepada nilai negatif boleh mencetuskan pengecutan sebelum elemen sasaran sepenuhnya meninggalkan viewport; Menetapkannya ke nilai positif boleh mencetuskan pengecutan selepas elemen sasaran memasuki jarak tertentu ke dalam viewport.
3. Kelancaran Animasi : Harta peralihan CSS adalah kunci untuk mencapai animasi yang lancar. Pastikan untuk menetapkan atribut peralihan yang sesuai untuk menukar atribut seperti ketinggian bar navigasi dan saiz logo untuk memberikan pengalaman visual yang lebih baik.
4. Reka Bentuk Responsif : Walaupun pemerhati persimpangan itu sendiri responsif, jika anda mahu bar navigasi menyusut kesan untuk hanya berkuatkuasa pada saiz skrin tertentu (seperti peranti mudah alih dan tablet), anda boleh menggabungkannya dengan pertanyaan media CSS (@media) untuk mengehadkan skop aplikasi gaya .NAV-nav. Contohnya:

    @media (max-width: 960px) { /* hanya berkuat kuasa apabila lebar skrin kurang dari 960px* /
       header.Nav-Scrolled {
           Ketinggian: 45px;
           /* ... gaya pengecutan lain*/
       }
       header.nav-scrolled .logo {
           saiz font: 20px;
       }
   }

5. Keserasian Pelayar : API Observer Persimpangan disokong secara meluas dalam pelayar moden. Bagi projek-projek yang perlu menyokong pelayar yang lebih tua, polyfills (seperti pakej NPM Observer Persimpangan) mungkin perlu diperkenalkan untuk memastikan keserasian.
6. Pemprosesan Logo : Jika logo adalah imej, selain menyesuaikan saiz fon, anda juga perlu menyesuaikan atribut lebar atau ketinggian elemen IMG dalam CSS, dan juga menambah peralihan untuk memastikan skala yang lancar.

Meringkaskan

Melalui gabungan API Observer Intersection dan CSS, kita boleh dengan mudah dan cekap melaksanakan bar navigasi yang mengecut secara dinamik apabila halaman ditatal. Pendekatan ini bukan sahaja meningkatkan prestasi laman web, tetapi juga mengoptimumkan pengalaman melayari pengguna pada peranti yang berbeza, terutama pada skrin.