Horizontal timeline as you scroll down

Question

Horizontal timeline as you scroll down

Asked 9 years, 4 months ago

Viewed 436 times

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>
  <script src="js/init.js"></script>
</body>
</html>

I would like a help to make a Timeline while scrolling down the page.

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

same but the scroll was vertical same, normal, as if it were filling while the user goes down the page...

what have you tried?

– user8545

2015/07/23 at 16:39
Look what I’ve done.

– Yuri Rodrigues

2015/07/23 at 17:12
the code seems to be all right, just need to change the Javascript and CSS, to make the animation vertically instead of horizontally, in the function "$.fn.slideToPos()"

– Kup

2015/07/30 at 14:16
Yuri, that last issue was with problem solving or you still need help solving?

– Sergio

2015/07/31 at 22:48

1 answer

Browser other questions tagged jquery html rolling

You are not signed in. Login or sign up in order to post.

by Fernando Rangel • **131** points · Answer 1 · 2017-05-13T23:19:47+00:00

Have the Materialize framework that has this Feature that you want ready. Just use.

Following link from Feature: http://materializecss.com/scrollspy.html.

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

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

Follow 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>
    <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>