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
`parentSelector`	Defines the parent element	`null`
`targetSelector`	Determines the height of which element should be taken into account when calculating the `startPoint`	`null`
`stickyOffsetTop`	Determines the distance above the edge of the visible area	`0`
`stickyOffsetBottom`	Determines the distance below the edge of the visible area	`0`
`startPoint`	Determines upon reaching which block specified in the value, the sticks the block begins to become `fixed`	`null`
`endPoint`	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`
`breakpoint`	Determines with what permission the plugin is initialized. Resolution Map corresponds to Bootstrap 4	`'lg'`