Materialize CSS Pushpin, Working with Pushpin in Materialize CSS

Materialize CSS Tutorial

Materialize Pushpin

Material Design Pushpin means fixed positioning plugin. Use this to pin elements to your page during specific scroll ranges. You can check out the following example.

Demo Code

$('.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%;
}

jQuery Plugin Initialization

Here is a sample initialization of materialize pushpin.

$(document).ready(function(){
    $('.target').pushpin({
      top: 0,
      bottom: 1000,
      offset: 0
    });
});

CSS Classes

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;
}

Removal

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');

Pushpin Demo

<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>

Output :

Materialize CSS Tutorial