Bootstrap JS Affix
JS Affix (affix.js)
Die Affix-inprop laat 'n element toe om aan 'n area op die bladsy geheg (gesluit) te word. Dit word dikwels gebruik met navigasie-kieslyste of sosiale ikoonknoppies, om hulle by 'n spesifieke area te laat "plak" terwyl hulle op en af op die bladsy blaai.
Die inprop skakel hierdie gedrag aan en af (verander die waarde van CSS-posisie van staties na vas), afhangende van rolposisie.
Die affix-inprop wissel tussen drie klasse: .affix, .affix-top, en
.affix-bottom. Elke klas verteenwoordig 'n spesifieke toestand. Jy moet CSS-eienskappe byvoeg om die werklike posisies te hanteer, met die uitsondering van position:fixed
op die .affixklas.
Vir meer inligting, lees ons Bootstrap Affix Tutoriaal .
Wenk: Die Affix-inprop word dikwels saam met die Scrollspy- inprop gebruik.
Via data-* Kenmerke
Voeg data-spy="affix"by die element waarop jy wil spioeneer, en die
kenmerk om die posisie van die boekrol te bereken.data-offset-top|bottom="number"
Voorbeeld
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
Via JavaScript
Aktiveer handmatig met:
Voorbeeld
$('.nav').affix({offset: {top: 150} });
Plak Opsies aan
Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-offset="".
| Name | Type | Default | Description |
|---|---|---|---|
| offset | number | object | function | 10 |
Specifies the number of pixels to offset from screen when calculating position of scroll. When using a single number, the offset is added to both top and bottom directions. If you only want to control the top or the bottom, use an object, like offset: {top:25}For multiple offsets, use offset: {top:25, bottom:50}Tip: Use a function to dynamically provide an offset (can be useful for responsive designs) |
| target | selector | node | element | the window object | Specifies the target element of the affix |
Plak Gebeurtenisse aan
Die volgende tabel lys alle beskikbare affiksgebeurtenisse.
| Event | Description | Try it |
|---|---|---|
| affix.bs.affix | Occurs before fixed positioning is added to the element (e.g, when the .affix-top class is about to be replaced with the .affix class) |
|
| affixed.bs.affix | Occurs after fixed positioning is added to the element (e.g., after the .affix-top class is replaced with the .affix class) |
|
| affix-top.bs.affix | Occurs before the top element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-top) |
|
| affixed-top.bs.affix | Occurs after the top element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-top) |
|
| affix-bottom.bs.affix | Occurs before the bottom element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-bottom) |
|
| affixed-bottom.bs.affix | Occurs after the bottom element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-bottom) |
Meer voorbeelde
Aangebring navigasiebalk
Skep 'n horisontale aangehegte navigasiekieslys:
Voorbeeld
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
Gebruik jQuery om outomaties 'n navigasiebalk aan te bring
Gebruik jQuery se outerHeight() metode om die navigasiebalk aan te bring nadat die gebruiker deur 'n gespesifiseerde element (<header>) gerol het:
Voorbeeld
$(".navbar").affix({offset: {top: $("header").outerHeight(true)}
});
Scrollspy & Plak
Gebruik die Affix-inprop saam met die Scrollspy- inprop:
Horisontale spyskaart (navigasiebalk)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
Vertikale spyskaart (Sidenav)
<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>
Geanimeerde navigasiebalk op aanhegsel
Gebruik CSS om die verskillende .affix-klasse te manipuleer:
Voorbeeld - Verander agtergrondkleur en opvulling van navigasiebalk op rol
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
background-color: #F44336;
border-color: #F44336;
}
.affix a {
color: #fff !important;
padding: 15px !important;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top a {
padding: 25px !important;
}
Voorbeeld - Skuif in die navigasiebalk
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
}