Sticky Block
Cara Pakai
Copy-paste script berikut sebelum tag penutup <body>
<script>
(function() {
// INITIALIZATION OF STICKY BLOCKS
// =======================================================
new NueStickyBlock('.js-sticky-block', {
targetSelector: document.getElementById('header').classList.contains('navbar-fixed') ? '#header' : null
})
});
</script>
Example
<!-- Sticky Block -->
<div id="stickyBlockStartPoint">
<nav class="js-sticky-block bg-primary rounded"
data-nue-sticky-block-options='{
"parentSelector": "#stickyBlockStartPoint",
"breakpoint": "lg",
"startPoint": "#stickyBlockStartPoint",
"endPoint": "#stickyBlockEndPoint",
"stickyOffsetTop": 20,
"stickyOffsetBottom": 20
}'>
Example text ...
</nav>
</div>
<!-- End Sticky Block -->
<!-- Sticky Block End Point -->
<div id="stickyBlockEndPoint"></div>
Methods
Parameters | Description | Default value |
---|---|---|
| Defines the parent element | null |
| Determines the height of which element should be taken into account when calculating the startPoint | null |
| Determines the distance above the edge of the visible area | 0 |
| Determines the distance below the edge of the visible area | 0 |
| Determines upon reaching which block specified in the value, the sticks the block begins to become fixed | null |
| Determines upon reaching which block specified in the value, the sticks the block ceases to be fixed . If the stick does not have a breakpoint, then set the value to 9999999 , that is, the maximum possible page height | null |
| Determines with what permission the plugin is initialized. Resolution Map corresponds to Bootstrap 4 | 'lg' |