2

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

Gostaria de uma ajuda para fazer uma timeline enquanto desce a pagina.

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

igual essa mas o scroll era na vertical mesmo, normal, como se fosse preenchendo enquanto o usuário desce a pagina...

4
  • oq você já tentou?
    – user8545
    23/07/2015 às 16:39
  • Olhá ai o que eu já fiz. 23/07/2015 às 17:12
  • o código parece estar todo bem, apenas precisas de trocar o Javascript e o CSS, para que faça a animação na vertical ao invés de fazer na horizontal, na função "$.fn.slideToPos()"
    – Kup
    30/07/2015 às 14:16
  • Yuri, essa ultima edição foi com a resolução do problema ou ainda precisas de ajuda a resolver?
    – Sergio
    31/07/2015 às 22:48

1 Resposta 1

-1

Tem o framework Materialize que tem essa feature que você quer pronta. É só usar.

Segue link da feature: http://materializecss.com/scrollspy.html.

Para usar, você vai precisar importar o CSS e o JS do Materialize e utilizar o Jquery.

Como usar o Materialize: http://materializecss.com/getting-started.html

Segue exemplo de como vai ficar:

$(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>
    
    

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .