Bootstrap mesti mempelajari pemalam navigasi tambahan (Affix) setiap hari kemahiran javascript-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

Bootstrap mesti mempelajari pemalam navigasi tambahan (Affix) setiap hari kemahiran javascript

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:04 PM

Pemalam Affix membenarkan

dibetulkan di lokasi tertentu pada halaman. Anda juga boleh bertukar antara menggunakan pemalam untuk hidup atau mati. Contoh biasa ialah ikon sosial. Mereka akan bermula pada kedudukan tertentu, tetapi apabila tanda diklik pada halaman,

akan dikunci dalam kedudukan dan tidak akan menatal dengan seluruh halaman.
Jika anda ingin merujuk kefungsian pemalam secara individu, maka anda perlu merujuk affix.js.

1. Penggunaan

Pemalam Affix boleh digunakan melalui atribut data atau melalui JavaScript.
1. Melalui atribut data: Jika anda perlu menambah gelagat navigasi tambahan (Affix) pada elemen, anda hanya perlu menambah data-spy="affix" pada elemen yang perlu dipantau. Gunakan offset untuk menentukan masa untuk menogol kunci dan menggerakkan elemen.
2. Melalui JavaScript: Anda boleh menambah navigasi tambahan (Affix) secara manual pada elemen melalui JavaScript

2. Meletakkan melalui CSS

Dalam kedua-dua cara di atas menggunakan pemalam Affix, anda perlu meletakkan kandungan melalui CSS. Pemalam Navigasi Terlampir (Affix) bertukar antara tiga kelas, setiap satunya menunjukkan keadaan tertentu: .affix, .affix-top dan .affix-bottom. Sila ikuti langkah di bawah untuk menetapkan CSS anda sendiri untuk ketiga-tiga keadaan ini (tanpa bergantung pada pemalam ini).
1. Pada mulanya, pemalam menambah .affix-top untuk menunjukkan elemen berada di kedudukan teratasnya. Tiada kedudukan CSS diperlukan pada masa ini.
2. Apabila menatal melepasi elemen dengan navigasi tambahan (Affix) ditambah, navigasi tambahan sebenar (Affix) harus dicetuskan. Pada masa ini, .affix akan menggantikan .affix-top dan tetapkan kedudukan: (disediakan oleh kod CSS Bootstrap).
3. Jika offset bawah ditentukan, apabila skrol mencapai kedudukan ini, .imbuhan hendaklah digantikan dengan .imbuhan-bawah. Memandangkan offset adalah pilihan, menetapkannya memerlukan CSS yang sesuai ditetapkan juga. Dalam kes ini, tambah kedudukan: mutlak;

3 Pilihan

Sesetengah pilihan dihantar melalui atribut data atau JavaScript. Pilihan disenaraikan dalam jadual di bawah:

4. Contoh
Navigasi tambahan ditampal di suatu tempat pada skrin untuk melaksanakan fungsi utama.
1. Contoh asas

<body data-spy="scroll" data-target="#myScrollspy">
 
 <div class="container">
 <div class="jumbotron" style="height:150px">
  <h1>Bootstrap Affix</h1>
 </div>
 <div class="row">
  <div class="col-xs-3" id="myScrollspy">
  <ul class="nav nav-pills nav-stacked" data-spy="affix"data-offset-top="150">
   <li class="active">
   <a href="#section-1">第一部分 </a>
   </li>
   <li>
   <a href="#section-2">第二部分</a>
   </li>
   <li>
   <a href="#section-3">第三部分</a>
   </li>
   <li>
   <a href="#section-4">第四部分</a>
   </li>
   <li>
   <a href="#section-4">第五部分</a>
   </li>
  </ul>
  </div>
  <div class="col-xs-9">
  <h2 id="section-1">第一部分</h2>
  <p>
   ...
  </p>
  <h2 id="section-2">第二部分</h2>
  <p>
   ...
  </p>
  <h2 id="section-3">第三部分</h2>
  <p>
   ...
  </p>
  <h2 id="section-4">第四部分</h2>
  <p>
   ...
  </p>
  <h2 id="section-5">第四部分</h2>
  <p>
   ...
  </p>
  </div>
 
 </div>
 </div>

Salin selepas log masuk

2. CSS sebahagian daripada navigasi

ul.nav-pills {
 width: 200px;
}
ul.nav-pills.affix {
 top: 30px;
}
//JavaScript 代替 data-spy="affix" data-offset-top="125"
 
$('#myAffix').affix({
 offset : {
 top : 150
 }
})

Salin selepas log masuk

Kami menggunakan bahagian atas secara lalai, tetapi sudah tentu ia juga boleh menjadi bahagian bawah secara lalai. Kaedah penentududukan ini diletakkan terus melalui CSS.

//设置成 bottom
 
ul.nav-tabs.affix-bottom {
 bottom: 30px;
}
//设置成 bottom
 
$('#myAffix').affix({
 offset : {
 bottom : 150
 }
})

Salin selepas log masuk

Imbuhan mengandungi beberapa acara, seperti berikut:

//其他雷同
 
$('#myAffix').on('affixed-top.bs.affix', function() {
 alert('触发！');
});

Salin selepas log masuk

Untuk maklumat lanjut, sila rujuk: Tutorial Pembelajaran Bootstrap

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.

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

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang lalu By DDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Cara Membuka Segala -galanya Di Myrise

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7464

Tutorial CakePHP

1376

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

Tunjukkan Lagi

Related knowledge

Ganti aksara rentetan dalam javascript Mar 11, 2025 am 12:07 AM

Penjelasan terperinci mengenai kaedah penggantian rentetan javascript dan Soalan Lazim Artikel ini akan meneroka dua cara untuk menggantikan watak rentetan dalam JavaScript: Kod JavaScript dalaman dan HTML dalaman untuk laman web. Ganti rentetan di dalam kod JavaScript Cara yang paling langsung ialah menggunakan kaedah pengganti (): str = str.replace ("cari", "ganti"); Kaedah ini hanya menggantikan perlawanan pertama. Untuk menggantikan semua perlawanan, gunakan ungkapan biasa dan tambahkan bendera global g: str = str.replace (/fi

Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri? Mar 18, 2025 pm 03:12 PM

Artikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.

Bagaimanakah saya mengoptimumkan kod JavaScript untuk prestasi dalam penyemak imbas? Mar 18, 2025 pm 03:14 PM

Artikel ini membincangkan strategi untuk mengoptimumkan prestasi JavaScript dalam pelayar, memberi tumpuan kepada mengurangkan masa pelaksanaan dan meminimumkan kesan pada kelajuan beban halaman.

Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan? Apr 04, 2025 pm 02:42 PM

Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...

Bagaimanakah saya boleh debug kod javascript dengan berkesan menggunakan alat pemaju pelayar? Mar 18, 2025 pm 03:16 PM

Artikel ini membincangkan debugging JavaScript yang berkesan menggunakan alat pemaju pelayar, memberi tumpuan kepada menetapkan titik putus, menggunakan konsol, dan menganalisis prestasi.

10 cara untuk meningkatkan prestasi jQuery anda dengan serta -merta Mar 11, 2025 am 12:15 AM

Artikel ini menggariskan sepuluh langkah mudah untuk meningkatkan prestasi skrip anda dengan ketara. Teknik -teknik ini adalah mudah dan boleh digunakan untuk semua tahap kemahiran. Tetap dikemas kini: Gunakan pengurus pakej seperti npm dengan bundler seperti Vite untuk memastikan

Menggunakan pasport dengan sekuel dan mysql Mar 11, 2025 am 11:04 AM

Sequelize adalah node.js Orm berasaskan janji. Ia boleh digunakan dengan PostgreSQL, MySQL, MariaDB, SQLite, dan MSSQL. Dalam tutorial ini, kami akan melaksanakan pengesahan untuk pengguna aplikasi web. Dan kami akan menggunakan Pasport, Pengesahan Middlew Popular

Cara Membina Slider JQuery Mudah Mar 11, 2025 am 12:19 AM

Artikel ini akan membimbing anda untuk membuat karusel gambar mudah menggunakan perpustakaan jQuery. Kami akan menggunakan perpustakaan BXSlider, yang dibina di atas jQuery dan menyediakan banyak pilihan konfigurasi untuk menubuhkan karusel. Pada masa kini, Gambar Carousel telah menjadi ciri yang mesti ada di laman web - satu gambar lebih baik daripada seribu perkataan! Selepas membuat keputusan untuk menggunakan karusel gambar, soalan seterusnya adalah bagaimana untuk menciptanya. Pertama, anda perlu mengumpul gambar-gambar resolusi tinggi yang berkualiti tinggi. Seterusnya, anda perlu membuat karusel gambar menggunakan HTML dan beberapa kod JavaScript. Terdapat banyak perpustakaan di web yang dapat membantu anda membuat karusel dengan cara yang berbeza. Kami akan menggunakan Perpustakaan BXSlider Sumber Terbuka. Perpustakaan BXSlider menyokong reka bentuk responsif, jadi karusel yang dibina dengan perpustakaan ini dapat disesuaikan dengan mana -mana

See all articles