<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<article class="container">
<header class="jumbotron text-center">
<h2>Timeline Scroll Section by Section</h2>
<p class="text-warning">Move your mouse to the right edge of the viewport</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia doloremque minima ab? Id provident aperiam atque excepturi repudiandae quis eveniet expedita dolores esse doloremque quasi sed magnam commodi sit modi!</p>
<p>Molestiae incidunt asperiores rerum consequatur laboriosam eius minima suscipit ipsam vel magni! Ratione nisi neque cum eaque accusantium voluptatem distinctio quidem minus excepturi illo ipsam hic laudantium quas. Id laudantium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos ad assumenda molestias tempora at natus sint fugiat cum ullam esse magni quidem facilis quis dolore tenetur inventore provident maxime consequuntur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque architecto officia praesentium cupiditate eos laboriosam dolorum placeat amet corporis eveniet. Itaque nesciunt perspiciatis quasi architecto ipsam molestias dignissimos quo consequuntur!</p>
<p>Exercitationem sunt deleniti atque quaerat repudiandae quisquam recusandae dicta ea et cumque praesentium animi magni quia labore rerum esse illum ad! Nihil quidem eaque nesciunt laborum repellendus ipsa sit ipsum.</p>
<p>Eum quis iure nulla exercitationem repellendus ducimus provident recusandae facilis doloremque numquam odit in veritatis libero placeat minus praesentium animi voluptate eaque tenetur delectus sequi. Quas debitis eos dignissimos reiciendis?</p>
<p>Sapiente vitae ipsam quibusdam ullam modi excepturi impedit tempore laborum atque hic magnam consequatur aspernatur adipisci! Eveniet nemo dicta sint sunt accusantium dolore sed commodi dolor ipsa perspiciatis culpa repellendus.</p>
<p>Eligendi illo quod non vitae quas delectus quis. Aliquam magnam hic nisi natus unde facere cum eos cupiditate est blanditiis dolorem dolorum quisquam accusamus quas veniam adipisci deserunt tempora inventore.</p>
<p>Illum quas omnis quidem ducimus id nulla veritatis placeat consectetur dolorem molestiae modi est numquam sed sint quaerat illo voluptas totam hic velit nesciunt nobis libero amet adipisci consequatur tenetur.</p>
<p>Ea laudantium laborum commodi doloremque at omnis sunt accusantium expedita aliquam quisquam dolorum fugit consequuntur consectetur vel neque sed provident distinctio incidunt voluptates libero aut quam ratione cum tenetur earum.</p>
<p>Similique architecto placeat recusandae quam ad tempore perferendis odio possimus assumenda soluta ipsum quasi et nisi fugiat vel iure illum sequi optio harum dolor. Sit dolore molestiae saepe placeat voluptates.</p>
<h2>Something</h2>
<h2>Something else</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique asperiores ab perspiciatis aliquid maiores iusto corporis perferendis ea nihil vel veritatis accusamus atque incidunt nemo natus eveniet consequuntur placeat quidem!</p>
<p>Impedit est commodi alias accusamus sit ut ad explicabo ipsum non eveniet? Necessitatibus deleniti eos modi omnis deserunt porro optio fugiat aliquid quisquam reprehenderit accusantium suscipit id labore odio praesentium.</p>
<p>Dolore autem harum ipsum aspernatur earum iusto hic ut veritatis officia nam veniam corrupti eius. Quas qui expedita tempora doloribus in distinctio asperiores maxime ipsam veritatis amet libero aliquam voluptatibus.</p>
<p>Provident totam beatae sequi minus voluptas voluptates fugiat libero perferendis officiis tempore eum amet hic dolore dolorum quos nemo architecto veniam in iure nostrum sint aliquam magni necessitatibus rerum maiores.</p>
<p>Provident dolor suscipit atque dicta ex maiores adipisci deserunt quaerat reiciendis eaque qui similique doloremque amet iste iure inventore aspernatur vero delectus laboriosam deleniti voluptatum. Molestias voluptas nemo cum in!</p>
<p>Quo nulla id dolor et facere mollitia alias modi officiis doloremque eligendi doloribus fugiat ratione cupiditate amet excepturi laboriosam natus. Dolores possimus magni officiis veniam expedita libero iure maiores voluptatibus.</p>
<p>Cumque consequatur rem alias neque sunt minus nostrum! Saepe illum magnam earum quis molestias nobis repellat debitis illo sit iusto repellendus nesciunt necessitatibus nam inventore ex doloremque nemo nisi suscipit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iure a illum doloremque quibusdam omnis veritatis facere harum dolores voluptate quos laborum consectetur saepe earum doloribus eaque voluptas dolore quas.</p>
<p>Atque harum earum tempora natus repudiandae minus quidem velit consectetur perferendis consequatur necessitatibus facilis rerum excepturi ipsam dolores laborum accusantium maxime iure debitis nesciunt ratione vel veniam. Ipsa vitae quasi!</p>
<p>Unde minima suscipit esse molestias totam blanditiis dolor ut ipsa officia ducimus accusantium expedita quaerat alias dolores magni velit porro atque consequatur! Fugit a nesciunt cupiditate temporibus placeat minus debitis?</p>
<p>Vitae aliquid soluta blanditiis quam qui accusamus rem aut magnam laudantium molestiae incidunt dolorem recusandae voluptatem illo veniam facere similique corrupti hic harum iure! Perferendis dolorem repudiandae nam distinctio nisi.</p>
<p>Libero rem ad saepe tenetur doloremque et amet quasi rerum officia! Numquam voluptas eligendi pariatur sed quaerat cupiditate fugit dignissimos at velit beatae nulla corrupti libero voluptatem dicta ut quos?</p>
<p>Voluptatem voluptatibus debitis quia! Odit aliquam natus laborum et mollitia nulla est quaerat beatae pariatur dicta hic officia numquam facere neque officiis asperiores aperiam praesentium ipsum molestias velit deleniti doloribus.</p>
<p>Aliquam maxime atque magni perferendis rem voluptas repellendus! Hic rerum officiis sint et minima nisi modi perspiciatis quidem commodi aperiam molestiae eum atque eaque natus expedita consequatur aliquid rem totam.</p>
<p>Aliquam in rem voluptates distinctio alias corrupti iste ullam voluptatum molestiae debitis quidem quas earum dolorem perferendis cum corporis ipsam. Aspernatur provident maiores aperiam asperiores temporibus quo iste obcaecati earum.</p>
<p>Dolores ipsum quam asperiores officia accusamus facere veniam possimus dolorum cupiditate impedit iure explicabo voluptatem inventore maiores sit alias placeat quisquam blanditiis temporibus eius consectetur magni cumque atque pariatur ipsa!</p>
<p>Ratione culpa doloribus qui consequuntur error nulla dicta modi dignissimos blanditiis accusamus ad maxime quidem voluptatibus enim consectetur numquam amet. Sint nulla voluptatibus dolorum eligendi minus enim ipsum quo dolor!</p>
<h2>This is Better</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur alias eligendi ducimus eaque vitae officiis repellendus enim dignissimos iste sed aliquam temporibus praesentium impedit fuga consequuntur. Adipisci tenetur doloremque debitis.</p>
<p>Atque blanditiis voluptatem recusandae omnis eum suscipit ea facilis aliquid quod enim voluptate eaque sint hic excepturi nesciunt vero quam harum delectus quis sunt asperiores possimus doloremque? Labore eos doloribus.</p>
<p>Magni dolores dolore totam. Fuga consequuntur omnis rerum quos nisi tempore soluta laborum obcaecati sapiente ut at doloribus natus culpa sit vitae? Pariatur laboriosam voluptatem amet praesentium explicabo earum error.</p>
<p>Aspernatur laboriosam unde quo ex exercitationem tempora officia quae eaque debitis sapiente modi beatae accusamus a id voluptatem perspiciatis dignissimos iste similique assumenda ducimus dolorum doloribus porro ratione! Maiores magnam.</p>
<p>Nesciunt eligendi saepe illo beatae quasi nobis similique libero aut velit voluptates quas a inventore consequatur. Fugit odio voluptates nesciunt doloremque ad harum voluptatem consequuntur eius voluptate tenetur ullam omnis.</p>
<h5>Laast</h5>
</article>
.timelineScroll {
position: fixed;
top: 0px;
right: 0;
bottom: 0px;
opacity: 0;
width: 170px;
margin: 17px 0;
overflow: hidden;
transition: .5s opacity linear;
&.active {
opacity: 1;
}
li {
width: 100%;
display: block;
position: absolute;
text-align: right;
padding-right: 11px;
a {
padding: 1px 4px;
background-color: rgba(255, 255, 255, .8);
}
}
}
// https://github.com/krnlde/jquery.timeline-scroll
!(function ($, window, undefined) {
var $window = $(window);
var $body = $(document.body);
var windowHeight = $window.height();
var bodyHeight = $body.height();
var defaults = {
scrollSpeed : 'fast'
};
$.fn.timelineScroll = function (opts) {
var that = this;
var options = $.extend(defaults, opts);
var $container, lastPosition = 0;
function calculateTop($elem) {
return $elem.offset().top;
}
function calculatePosition($elem) {
return calculateTop($elem) / bodyHeight * $container.height();
}
if (this.length) {
if (!$body.data('timelineScroll')) {
$container = $('<ul role="menubar" class="list-unstyled timelineScroll"/>').appendTo($body);
that.each(function () {
var $this = $(this);
var height = $this.height();
var top = calculateTop($this);
var position = calculatePosition($this);
if (!$this.attr('id')) {
$this.attr('id', $this.get(0).tagName + '_' + Math.floor(top * 100));
}
$a = $('<a href="#' + $this.attr('id') + '">' + $this.text() + '</a>').click(function () {
$('html, body').animate({scrollTop: top}, options.scrollSpeed);
return false;
});
var $li = $('<li/>', {
'role': 'menuitem',
'style': 'top: ' + position + 'px'
})
.append($a)
.data('connectedWith', $this)
.appendTo($container);
if (!lastPosition || lastPosition < position - $this.height()) {
lastPosition = position;
} else {
$li.hide();
}
});
$body.mouseover(function () {
$container.removeClass('active');
});
$container.mouseover(function () {
$(this).addClass('active');
return false;
});
$window.on('resize', function (e) {
windowHeight = $window.height();
bodyHeight = $body.height();
lastPosition = 0;
$container.children().each(function () {
var $this = $(this);
var position = calculatePosition($this.data('connectedWith'));
$this.css('top', position + 'px');
if (!lastPosition || lastPosition < position - $this.height()) {
lastPosition = position;
$this.show();
} else {
$this.hide();
}
});
})
$body.data('timelineScroll', $container);
}
}
};
$(function () {
$(':header').timelineScroll({scrollSpeed: 'fast'});
});
}(jQuery, window));
