Timeline Scroll

index.html

<ul class="timeline">
  <li class="bar"></li>
</ul>
<div class="container">
  <section data-name="Home">
    <h1>Home</h1>
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate porro odit esse ut quidem deleniti dolore doloremque aliquam neque ad at optio odio quasi aperiam necessitatibus reiciendis, quaerat quod autem.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima exercitationem earum beatae assumenda debitis quibusdam, ducimus autem a ab nisi, praesentium et enim numquam consequatur similique quis consectetur consequuntur iure!
    </p>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima exercitationem earum beatae assumenda debitis quibusdam, ducimus autem a ab nisi, praesentium et enim numquam consequatur similique quis consectetur consequuntur iure!
    </p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima exercitationem earum beatae assumenda debitis quibusdam, ducimus autem a ab nisi, praesentium et enim numquam consequatur similique quis consectetur consequuntur iure!
    </p>
  </section>
  <section data-name="Profile">
    
    <h1>Profile</h1>
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate porro odit esse ut quidem deleniti dolore doloremque aliquam neque ad at optio odio quasi aperiam necessitatibus reiciendis, quaerat quod autem.</h2>
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Placeholder&w=1800&h=600" alt="" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima exercitationem earum beatae assumenda debitis quibusdam, ducimus autem a ab nisi, praesentium et enim numquam consequatur similique quis consectetur consequuntur iure!
    </p>
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate porro odit esse ut quidem deleniti dolore doloremque aliquam neque ad at optio odio quasi aperiam necessitatibus reiciendis, quaerat quod autem.</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima exercitationem earum beatae assumenda debitis quibusdam, ducimus autem a ab nisi, praesentium et enim numquam consequatur similique quis consectetur consequuntur iure!
    <br>
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Placeholder&w=1800&h=600" alt="" />
    </p><h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate porro odit esse ut quidem deleniti dolore doloremque aliquam neque ad at optio odio quasi aperiam necessitatibus reiciendis, quaerat quod autem.</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima exercitationem earum beatae assumenda debitis quibusdam, ducimus autem a ab nisi, praesentium et enim numquam consequatur similique quis consectetur consequuntur iure!
    </p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima exercitationem earum beatae assumenda debitis quibusdam, ducimus autem a ab nisi, praesentium et enim numquam consequatur similique quis consectetur consequuntur iure!
    </p><h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate porro odit esse ut quidem deleniti dolore doloremque aliquam neque ad at optio odio quasi aperiam necessitatibus reiciendis, quaerat quod autem.</h1>
  </section>
  <section data-name="Works">
    <h1>Works</h1>
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate porro odit esse ut quidem deleniti dolore doloremque aliquam neque ad at optio odio quasi aperiam necessitatibus reiciendis, quaerat quod autem.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima exercitationem earum beatae assumenda debitis quibusdam, ducimus autem a ab nisi, praesentium et enim numquam consequatur similique quis consectetur consequuntur iure!
    </p>
  </section>
  <section data-name="Esperiments">
    <h1>Experiments</h1>
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate porro odit esse ut quidem deleniti dolore doloremque aliquam neque ad at optio odio quasi aperiam necessitatibus reiciendis, quaerat quod autem.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
  </section>
  <section data-name="About">
    <h1>About</h1>
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate porro odit esse ut quidem deleniti dolore doloremque aliquam neque ad at optio odio quasi aperiam necessitatibus reiciendis, quaerat quod autem.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
  </section>
  <section data-name="Contact">
    <h1>Contact</h1>
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate porro odit esse ut quidem deleniti dolore doloremque aliquam neque ad at optio odio quasi aperiam necessitatibus reiciendis, quaerat quod autem.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
  </section>
</div>

script.babel

$(function(){
  function sumSection(){
    return $(".container").height()
  }
  function setDimensionBar(){
    $(".bar").css({
      "height": ($(window).height()/sumSection())*100 + "%"
    })
  }
  function setSection(){
        $.each($("section"), function(i, element){
      $(element).css({
        "min-height": $(window).height()
      })
      })
  }
  
  function addBehaviours(){
    let sections = $("section")
    $.each($(".node"), function(i, element){
      $(element).on("click", function(e){
        e.preventDefault()
        let scroll = $(sections[i]).offset().top
        $('html, body').animate({
          scrollTop: scroll
        }, 500);
      })
    })
  }
  
  function arrangeNodes(){
    $(".node").remove()
    $.each($("section"), function(i, element){
      let name = $(element).data("name")
      let node = $("<li class='node'><span>"+name+"</span></li>")
      $(".timeline").append(node)

      $(node).css({
        "top": ($(".timeline").height()/$(document).height()) * $(element).offset().top
      })
    })
    addBehaviours()
  }
  
  $(window).on("scroll", function(){
    let top = (window.scrollY/sumSection())*100
    $(".bar").css({
        "top": top + "%"
      })
    
  })
  
  $(window).on("resize", function(){
    setSection()
    arrangeNodes()
    setDimensionBar()
  })
  
  setTimeout(
    function(){
      setSection()
      arrangeNodes()
      setDimensionBar()      
    },
    200
  )
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.sass

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,400,900')

a.white-mode, a.white-mode:link, a.white-mode:visited, a.white-mode:active
  position: fixed
  font-family: "Montserrat"
  transform: rotate(-90deg)
  transform-origin: 0 0
  left: 40px
  bottom: 0px
  font-size: 12px
  text-decoration: none
  background: #f7f7f7
  padding: 4px 8px
  z-index: 10
  color: #3B425A
  &:hover
    background: #7B46FE
    color: #FDFA75

body
  background: #32384f
  padding: 0
  margin: 0
  color: #FFF
h1
  font-size: 56px
  font-weight: 400
  color: #7045ff
  position: relative
  &:after
    content: ""
    padding-bottom: 30px
    display: block
    border-bottom: 1px solid rgba(70,76,99,1)
    width: 60%
h2
  font-size: 36px
  font-weight: 100
  color: #83ffe1
  position: relative
 
    
img
  max-width: 100%
.timeline
  margin: 0
  padding: 0
  list-style: none
  position: fixed
  left: 100px
  top: 5%
  width: 1px
  height: 90%
  background: rgba(70,76,99,1)
  .bar
    position: absolute
    width: 1px
    background-color: #fcf769
    top: 0
    left: 0
    z-index: 0
.container
  padding-left: 200px
section
  border-top: 2px solid #fcf769
  padding: 20px
  font-size: 16px
  font-weight: 200
  font-family: "Montserrat"

p
  line-height: 2

.node
  position: absolute
  width: 3px
  height: 3px
  background: #FFF
  left: -1px
  z-index: 1
  cursor: pointer
  border-radius: 3px
  
  &:hover
    background: #46ffdd
    span
      opacity: 1
    
  
  &:before
    content: ""
    position: absolute
    width: 9px
    height: 9px
    left: -3px
    top: -3px
  
  span
    transition: all .4s ease-out
    text-transform: uppercase
    right: 4px
    top: -16px
    color: #FFFFFF
    position: absolute
    padding: 10px
    white-space: nowrap
    font-size: 10px
    font-weight: 200
    font-family: "Montserrat"
    opacity: 0
    
    
      

timeline-scroll.markdown

Timeline Scroll

A Pen by Trí Dũng Lê on CodePen.

License.