$('.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, .block {
height: 100%;
}Here is a sample initialization of materialize pushpin.
$(document).ready(function(){
$('.target').pushpin({
top: 0,
bottom: 1000,
offset: 0
});
});A pushpinned element has 3 states. One above and below the scrolling threshold, and the pinned state where the element becomes fixed. Because pushpin changes positioning, chances are your element will look different when the states change. These are css classes to correctly 3 style 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;
}To remove the pushpin from an element, pass in 'remove' as the option to the pushpin function.
//Removes pushpin and pushpin classes
$('.tabs-wrapper .row').pushpin('remove');<style type="text/css">
html, body, .block {
height: 100%;
}
nav ul li a:hover, nav ul li a.active {
background-color: rgba(0,0,0,.1);
}
footer {
padding-left: 0;
}
</style>
<div id="blue" class="block blue">
<nav class="pushpin-demo-nav" data-target="blue">
<div class="nav-wrapper light-blue">
<div class="container">
<a href="#" class="brand-logo">Blue</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#!">Blue Link 1</a></li>
<li><a href="#!">Blue Link 2</a></li>
<li><a href="#!">Blue Link 3</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div id="red" class="block red lighten-1">
<nav class="pushpin-demo-nav" data-target="red">
<div class="nav-wrapper red">
<div class="container">
<a href="#" class="brand-logo">Red</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#!">Red Link 1</a></li>
<li><a href="#!">Red Link 2</a></li>
<li><a href="#!">Red Link 3</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div id="green" class="block green lighten-1">
<nav class="pushpin-demo-nav" data-target="green">
<div class="nav-wrapper green">
<div class="container">
<a href="#" class="brand-logo">Green</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#!">Green Link 1</a></li>
<li><a href="#!">Green Link 2</a></li>
<li><a href="#!">Green Link 3</a></li>
</ul>
</div>
</div>
</nav>
</div>
<script type="text/javascript">
$('.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()
});
});
</script>