Materializecss

Materialize css

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<div class="row">
  <div class="col s12 m9 l10">
    <div id="introduction" class="section scrollspy">
      <p>
order cruelty disagree censorship vegetable polish exercise precede parking seminar cell dependence landowner inject practical air hand put inspiration refuse unity press stop apple art interrupt fibre leaflet improvement concept addicted lace attraction disappear call trouble discover critical rice partner familiar needle extort uniform insurance mosaic stress peel shape medieval rain quantity vigorous field microphone violation bundle bride station researcher civilian pedestrian chart sugar pace satisfaction pastel plastic boom confine promote competence practice siege glimpse boot live pride hypothesis parameter folklore traffic ambiguity question pig ecstasy insist brag stubborn loot proud hate direct overlook authority garage fill catch write liberal bulb brain investment admiration rub arm brother worker horn computer virus prestige promotion threshold trace picture pension tap head introduction steel notorious hit attic ticket sea decisive visible pure failure queen error thought visit rule ruin scale rider loan revive recommendation skip timber performer refer integration smile user catalogue driver slide progress identity cry style afford train unfair suggest charter bet help wording crisis touch coal coast sip hard crosswalk respectable 

penny terrace look range trust cabinet watch deviation fare sustain term grief white series single harmful cunning soap kitchen session angle dragon biology merchant rush challenge peak cause butterfly chew distribute grind wolf adviser frown ash frequency object narrow roof institution ordinary conventional advantage forget hero disturbance remedy dinner denial guerrilla surround junior jelly...

CSS

#scrollspy-nav{
  position: sticky;
  top: 0;
}

#scrollspy-nav .active{
  color: red;
}

JavaScript

$( function() {
  // $('.scrollspy').scrollSpy();
  // {
  //   scrollOffset: 1,
  //   getActiveElement: function(id) {
  //     console.log('getActiveElement id:',id);
  //     return 'a[href="#' + id + '"]';
  //   }
  // });

  $('.scrollspy').scrollSpy();
  
  $('.scrollspy').on('scrollSpy:enter', function() {
    console.log('scrollSpy:enter! $(this):',$(this));
    // $('.navbar-fixed').find('a[href="#'+$(this).attr('id')+'"]').parent().addClass('active');
  });
  $('scrollspy').on('scrollSpy:exit', function(){
    console.log('scrollSpy:exit! $(this):',$(this));
    // $('.navbar-fixed').find('a[href="#'+$(this).attr('id')+'"]').parent().removeClass('active');
  });

  

  // $('.scrollspy').waypoint(function(direction) {
  //   console.log('WAYPOINT!! direction:',direction);
  //   jQuery(this).addClass('on').next();
  // });
});