Selasa, 09 Februari 2016

Bootstrap Affix

           No comments   

Bootstrap Afiks Plugin (Advanced) 

The Afiks Plugin

The Afiks Plugin memungkinkan unsur untuk menjadi ditempel (terkunci) ke suatu daerah pada halaman. Hal ini sering digunakan dengan menu navigasi atau tombol ikon sosial, untuk membuat mereka "tongkat" di kawasan tertentu sementara bergulir ke atas dan ke bawah halaman.
Plugin matikan perilaku ini dan mematikan (perubahan nilai posisi CSS dari statis untuk tetap), tergantung pada posisi gulir. 
Contoh 1) Sebuah navbar ditempel:


Contoh 2) Sebuah sidebar ditempel:


Dengan Afiks, ketika kita gulir ke atas dan ke bawah halaman, menu selalu terlihat dan terkunci di posisinya.
Cara Membuat menu ditempelkan Navigasi Contoh berikut menunjukkan cara membuat menu navigasi ditempelkan horisontal: 
Contoh
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
 
Contoh berikut menunjukkan cara membuat menu navigasi vertikal ditempel: 
Contoh  
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">

misalnya Dijelaskan

Tambahkan data-spy="affix" ke elemen Anda ingin ditempel.
Opsional, tambahkan data-offset-top|bottom atribut untuk menghitung posisi gulir.

Bagaimana itu bekerja

Imbuhan Plugin matikan antara tiga kelas: .affix , .affix-top , dan .affix-bottom . Setiap kelas mewakili negara tertentu. Anda harus menambahkan properti CSS untuk menangani posisi yang sebenarnya, dengan pengecualian position:fixed pada .affix kelas.
  • Plugin menambahkan .affix-top atau .affix-bottom kelas untuk menunjukkan elemen dalam top-sebagian besar atau paling bawah posisi. Positioning dengan CSS tidak diperlukan pada saat ini.

  • Bergulir melewati elemen ditempel memicu pembubuhan yang sebenarnya - ini adalah di mana plugin menggantikan .affix-top atau .affix-bottom kelas dengan .affix kelas (set position:fixed ). Pada titik ini, Anda harus menambahkan CSS top atau bottom properti untuk posisi elemen ditempel di halaman.

  • Jika bagian bawah diimbangi didefinisikan, bergulir melewati itu menggantikan .affix kelas dengan .affix-bottom . Sejak offset adalah opsional, menetapkan satu mengharuskan Anda untuk mengatur CSS yang sesuai. Dalam hal ini, menambahkan position:absolute bila diperlukan.
Pada contoh pertama di atas, plugin Afiks menambahkan .affix kelas (posisi: fixed) ke <nav> elemen ketika kita telah menggulir 197 piksel dari atas. Jika Anda membuka contoh, Anda juga akan melihat bahwa kita menambahkan CSS top properti dengan nilai 0 ke .affix kelas. Hal ini untuk memastikan bahwa navbar tetap di bagian atas halaman di semua waktu, ketika kita telah menggulir 197 piksel dari atas.
Scrollspy & Afiks Menggunakan Afiks Plugin bersama-sama dengan Scrollspy Plugin:
 
Horizontal Menu (Navbar)
Contoh
<body data-spy="scroll" data-target=".navbar" data-offset="50"> 
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
Menu Vertikal (Sidenav)
Contoh
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
  <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
  ...
</nav>

</body>

Referensi : http://www.w3schools.com/bootstrap/bootstrap_affix.asp 
Share:

0 komentar:

Posting Komentar