Materialize CSS pushpin is basically a fixed positioning plugin. Use this to pin elements to your page during specific scroll ranges.
$('.pushpin-demo-nav').each(function() {
var $this = $(this);
var $target = $('#' + $(this).attr('data-target'));
$this.pushpin({
top: $target.offset().top,
bottom: $target.offset().top + $target.outerHeight() - $this.height()
});
});
// Only necessary for window height-sized blocks.
html, body {
height: 100%;
}
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.pushpin');
var instances = M.Pushpin.init(elems, options);
});
// Or with jQuery
$(document).ready(function(){
$('.pushpin').pushpin();
});
A pushpinned element consists of 3 states.One above and below the scrolling threshold, and the pinned state where the element becomes fixed. Use these css classes to correctly style your 3 states.
// Class for when element is above threshold
.pin-top {
position: relative;
}
// Class for when element is below threshold
.pin-bottom {
position: relative;
}
// Class for when element is pinned
.pinned {
position: fixed !important;
}