Header Links

Link to paragraphs within a text, via https://github.com/benbalter/benbalter.github.com

//Include the following css:


.header-link {
  position: absolute;
  left: -0.5em;
  opacity: 0;

  -webkit-transition: opacity 0.2s ease-in-out 0.1s;
  -moz-transition: opacity 0.2s ease-in-out 0.1s;
  -ms-transition: opacity 0.2s ease-in-out 0.1s;
}

h2:hover .header-link,
h3:hover .header-link,
h4:hover .header-link,
h5:hover .header-link,
h6:hover .header-link {
  opacity: 1;
}


// including the following script, change to suit.
(function() {
  $(function() {
    return $(".post h2, .post h3, .post h4, .post h5, .post h6").each(function(i, el) {
      var $el, icon, id;
      $el = $(el);
      id = $el.attr('id');
      icon = '<i class="fa fa-link"></i>';
      if (id) {
        return $el.prepend($("<a />").addClass("header-link").attr("href", "#" + id).html(icon));
      }
    });
  });

}).call(this);