"Timeline Scroll Section by Section"
Bootstrap 3.3.0 Snippet by mrp3k

<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));

Related: See More


Questions / Comments: