jquery – Horizontal timeline while scrolling

Question:

(function($){
	$(function(){
	  
	  // Slider functionality
	  
	    // slide knob to position function
	    (function( $ ){
         $.fn.slideToPos = function() {
           var left = $(this).position().left + ($(this).width() / 2) - ($(".menu a.knob").width() / 2) - 2;
           $(".menu a.knob").css("left", left);
           var before = $(this).parent().parent().parent().children(".bar").first().children(".before").first();
           before.css("width", left + 20).css("backgroundColor", $($(this).attr("href")).css("backgroundColor"));
           return this;
         }; 
      })( jQuery );
	 	  
	 	$(".menu ul li.active a").slideToPos();     
    $(".menu ul li a").click(function(e) {
      e.preventDefault();
      $(this).slideToPos();
      $('html, body').animate({ scrollTop: $(this.hash).offset().top }, 400);
    });
    
    
    // Scroll Spy
    $(window).scroll(function() {
      var top = $(window).scrollTop() + 100; // Take into account height of fixed menu
      $(".container").each(function() {
        var c_top = $(this).offset().top;
        var c_bot = c_top + $(this).height();
        var hash = $(this).attr("id");
        var li_tag = $('a[href$="' + hash + '"]').parent();
        if ((top > c_top) && (top < c_bot)) {
          
          if (li_tag.hasClass("active")) {
            return false;
          }
          else {
            li_tag.siblings().andSelf().removeClass("active");
            li_tag.addClass("active");
            $(".menu ul li.active a").slideToPos();  
        	}
        }
      });
    });
	
	}); // end of document ready
})(jQuery); // end of jQuery name space
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* CSS RESET DONE */

html,body { height: 100%; }
body {
  color: #fff;
  margin: 0 auto;
  font: 1em/1.3em Helvetica, sans-serif;
	background-color: #333;  
}
.header {
  margin-bottom: 40px;
}
.clearfix {
  clear: both;
}

.container {
  z-index: 1;
  position: relative;
  background-color: #f4d432;
  padding-top: 120px;
  text-align: center;
  height: 100%;
}
  .container.blue {
    background-color: #0099cc;
  }
  .container.green {
    background-color: #9ed846;
  }
  .container.red {
    background-color: #ff6766;
  }


h1 {
  margin: 40px 0;
  font-size: 40px;
  line-height: 40px;
  font-weight: bold;
  text-shadow: 0px 1px 1px #888;
}
a {
  text-decoration: none;
  color: #fff;  
  margin: 0 10px;
}

.btn {
  box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
  
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  height: 50px;
  background-color: #666;
  
  border-radius: 30px;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  
  line-height: 30px;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0px 1px 1px #888;
}
  a.btn span.btn {
    position: absolute;
    top: 4px;
    left: 0;
    z-index: -1;
    
    width: 100%;
    background-color: #444;
  }
  .btn:active,
  .btn:active > span.btn{
    top: 2px;
  }
  .btn.active,
  .btn.active > span.btn {
    top: 2px;
  }
.btn-small {
  height: 30px;
  font-size: 12px;
  line-height: 10px;
}
  a.btn-small span.btn {
    height: 30px;
  }


/* Menu Styles */

.menu {
  width: 100%;
  position: fixed;
  height: 100px;
  background-color: #fff;
  top: 0;
  left: 0;
  z-index: 2;
}
  .menu .slider {
    position: relative;
    left: 10%;
    width: 80%;
    text-align: center;
  }
  
    .menu .slider .bar, .menu .slider .bar .before {
      height: 20px;
 
      transition: .5s; 
      -webkit-transition: .5s; 
     
      border-radius: 20px;
      -moz-border-radius: 20px;
      -webkit-border-radius: 20px;
    }
    
    .menu .slider .bar {
      position: relative;
      left: 3px;
      width: 100%;
      background-color: #777;
    }
      .menu .slider .bar .before {
        width: 100px;
        float: left;
        position: relative;
        left: -3px;
      }
      .menu .slider .bar a.knob { 
        position: absolute;
        top: -5px;
        left: 0;
        margin: 0;
        display: block;
        width: 30px;
        height: 30px;
        background-color: #ccc;

        border-radius: 15px;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        
        transition: .5s; 
        -webkit-transition: .5s; 
      }
    .menu ul { 
      height: 100%; 
      display: inline-block;
      margin: 20px 0 15px 0;
    }
    .menu ul li {
      margin: 0 40px;
      font-size: 12px;
      font-weight: bold;
      float: left;
    }
    .menu ul li a { color: #444; margin: 0; }
    
<!DOCTYPE html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Slider Timeline Menu</title>
  <link href="style.css" type="text/css" media="screen,projection" />
  <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
</head>

<body>
    <div class="menu">
      <div class="slider">
        <ul>
          <li class="category active"><a href="#home">HOME</a></li>
          <li class="category"><a href="#search">SEARCH</a></li>
          <li class="category"><a href="#about">ABOUT US</a></li>
          <li class="category"><a href="#contact">CONTACT US</a></li>
        </ul>
        <div class="bar">
          <div class="before"></div>
          <a class="knob"></a>
          <div class="after"></div>
        </div>
      </div>
    </div>
    
    <div id="home" class="container">
      <div class="header">
        <a href="http://webdesigncrowd.com" class="btn">WebDesignCrowd <span class="btn"></span></a>
        <a href="http://www.webdesigncrowd.com/css3-slider-timeline-menu/" class="btn">Back to Article <span class="btn"></span></a>
        <h1>Slider Timeline Menu</h1>
      </div>
    </div>
    <div id="search" class="container blue">
      <h1>Search</h1>
    </div>
    <div id="about" class="container green">
      <h1>About Us</h1>
    </div>
    <div id="contact" class="container red">
      <h1>Contact Us</h1>
    </div>
    
  
  <!-- Javascript -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="js/init.js"></script>
</body>
</html>

I would like some help with making a timeline while scrolling down.

http://global.penguinrandomhouse.com/company-history/

just like this one, but the scroll was vertical, normal, as if it were filling while the user scrolls down the page…

Answer:

There's the Materialize framework that has this feature you want ready. Just use it.

The feature link follows: http://materializecss.com/scrollspy.html .

To use it, you will need to import CSS and JS from Materialize and use Jquery.

How to use Materialize: http://materializecss.com/getting-started.html

Here is an example of how it will look:

$(document).ready(function(){
  $('.scrollspy').scrollSpy();
});
<html>
<head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
    </script>
</head>
<body>
  <div class="row">
    <div class="col s12 m9 l10">
      <div id="introduction" class="section scrollspy">
        <p>Content </p>
      </div>

      <div id="structure" class="section scrollspy">
        <p>Content </p>
      </div>

      <div id="initialization" class="section scrollspy">
        <p>Content </p>
      </div>
    </div>
    <div class="col hide-on-small-only m3 l2">
      <ul class="section table-of-contents">
        <li><a href="#introduction">Introduction</a></li>
        <li><a href="#structure">Structure</a></li>
        <li><a href="#initialization">Intialization</a></li>
      </ul>
    </div>
  </div>
</body>
</html>
    
    
Scroll to Top