Horizontal timeline while descending the page

3

(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" rel="stylesheet" media="screen,projection" />
  <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
</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><scriptsrc="js/init.js"></script>
</body>
</html>

I would like help to make a timeline as you go down the page.

link

    
asked by anonymous 23.07.2015 / 18:09

1 answer

0

It has the Materialize framework that has this feature that you want ready. Just use.

Follow feature link: link .

To use, you'll need to import the CSS and JS from Materialize and use Jquery.

How to use Materialize: link

Here is an example of how it will look:

$(document).ready(function(){
  $('.scrollspy').scrollSpy();
});
<html>
<head>
    <link rel="stylesheet" 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><scriptsrc="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>
    
    
    
14.05.2017 / 01:19