- When title is not visible anymore, then show the title in the top bar. - Show a reading time indicator.

hrt.js

// Function to convert to human readable time
function millisecondsToStr(milliseconds) {

    function numberEnding (number) {

        return (number > 1) ? 's left' : ' left';

    }

    var temp = Math.floor(milliseconds / 1000);
    var years = Math.floor(temp / 31536000);

    if (years) {

        return years + ' year' + numberEnding(years);

    }

    var days = Math.floor((temp %= 31536000) / 86400);

    if (days) {

        return days + ' day' + numberEnding(days);

    }

    var hours = Math.floor((temp %= 86400) / 3600);

    if (hours) {

        return hours + ' hour' + numberEnding(hours);

    }

    var minutes = Math.floor((temp %= 3600) / 60);

    if (minutes) {

        return minutes + ' minute' + numberEnding(minutes);

    }

    var seconds = temp % 60;

    if (seconds) {

        return seconds + ' second' + numberEnding(seconds);

    }

    return 'Thanks for reading!'; //'just now' //or other string you like;

}

throttle.js

// Throttle
function throttle(fn, threshhold, scope) {
  threshhold || (threshhold = 250);
  var last,
      deferTimer;
  return function () {
    var context = scope || this;

    var now = +new Date,
        args = arguments;
    if (last && now < last + threshhold) {
      // hold on to it
      clearTimeout(deferTimer);
      deferTimer = setTimeout(function () {
        last = now;
        fn.apply(context, args);
      }, threshhold);
    } else {
      last = now;
      fn.apply(context, args);
    }
  };
}

title-reading-time.js

// Feature: Fade the title in nav in when the title is not visible anymore
// Feature: Show reading time indicator

// Inspiration
// 1) http://www.nytimes.com/2015/02/08/business/marijuana-industry-in-colorado-eager-for-its-own-bank-waits-on-the-fed.html?hp&action=click&pgtype=Homepage&module=photo-spot-region&region=top-news&WT.nav=top-news
// 2) from http://benfrain.com/oocss-atomic-css-responsive-web-design-anti-pattern/

// TODO 
// 1) use math.min to limit range between 0 and the max word_count - NOT NECISSARY ANYMORE
// 2) Convert it to minutes in reading time - DONE
// 3) Find out averige words per minute reading count - DONE
// 4) Convert the minutes in 1 decimal (1.3m) to min/sec (1h1m30s format), maybe use momentjs? - DONE
// 5) Make it more performant (throttle that shit) - DONE
// 6) Add flag to change output from human readable time to amount of words left

// When we've finished loading
$(window).load(function(){

	// Base variables, only need setting once
	var title_marker = $('.tmp-container h1').offset().top + $('.tmp-container h1').height(); // The height of the title plus it's top offset
	var word_count = $('.tmp-container').text().split(/\s+/).length; // The amount of words
	var d_height = $(document).height(); // The height of the whole page
	var w_height = $(window).height(); // The height of the visible area (window)
	var wpm = 450; // average words per minute (http://www.forbes.com/sites/brettnelson/2012/06/04/do-you-read-fast-enough-to-be-successful/)

	// When we're scrolling, throttled (limited) with a 50ms interval for performance
	$(window).on('scroll', throttle(function (event) {

		// Set these variables every time
		var y = $(this).scrollTop(); // current scroll position
		var perc = ($(window).scrollTop() / ($(document).height() - $(window).height())); // current scroll position
		var words_left = word_count - (word_count * perc);
		var mins_left = Math.round(words_left / wpm * 10) / 10; // The amount of minutes to read left, based on the average
		var secs_left_actual = (mins_left * 60) * 1000; // in ms;
		var hrt = millisecondsToStr(secs_left_actual);

		// We insert the human readable time calculated above into the DOM
		$('.menu-top ul li.center span').html(hrt);

		// Show & hide title in nav bar when the scroll position exceeds the height + offset of the page title
		if (y > title_marker) {

			$('.menu-top ul li.center').addClass('js-show'); // Show it

		} else {

			$('.menu-top ul li.center').removeClass('js-show'); // Hide it

		}

	}, 50));

});