Materialize CSS Pushpin

Materialize CSS Pushpin

Materialize CSS pushpin is basically a fixed positioning plugin. Use this to pin elements to your page during specific scroll ranges.

Example

Open Demo

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()
    });
  });
   
CSS Code
  
 // Only necessary for window height-sized blocks.
  html, body {
     height: 100%;
   }
   
Initialization
  
 document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.pushpin');
    var instances = M.Pushpin.init(elems, options);
  });
  // Or with jQuery
  $(document).ready(function(){
    $('.pushpin').pushpin();
  });    
   

CSS Classes

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.

CSS Classes
      
// 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;
  }
   

Source Code : Output

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS