%header
  .slider-navigation
    .nav-pointer.draggable
      0/0
.site-container
  %section.intro
    .wrap
      .content
        %h1 Hello.
        %h2 My name is Tyler Fowle
        %h5 I create amazing front end interfaces
  - (2..10).each do |i|
    %section
      .wrap
        .content
          %h1 Section #{i}
          %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo necessitatibus fuga deserunt beatae ut minima, nobis voluptates dolore suscipit corporis temporibus quaerat, vel amet magnam voluptas, aliquid nostrum ipsa fugiat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo necessitatibus fuga deserunt beatae ut minima, nobis voluptates dolore suscipit corporis temporibus quaerat, vel amet magnam voluptas, aliquid nostrum ipsa fugiat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo necessitatibus fuga deserunt beatae ut minima, nobis voluptates dolore suscipit corporis temporibus quaerat, vel amet magnam voluptas, aliquid nostrum ipsa fugiat.
View Compiled
* {box-sizing: border-box; margin: 0; padding: 0;}

// options
$ticks: false;  // show or hide section ticks on nav
$text-color: #222;
$wrap-width: 1140px;
$paragraph-line-height:   1.4;
$paragraph-bottom-margin: 18px;

.wrap {
	margin: 0 auto;
	max-width: $wrap-width;
  padding: 0 20px;
}

header {
	position: relative;
	z-index: 999;
}

section {
  height: 100vh;
  display: flex;
  align-items: center;
  padding-right: 100px;
  transition: .5s ease;
  &:nth-child(odd){background-color: darken(white,3)}
  
  &.intro {
    text-align: center;
    h2,h5 {font-weight: 300; margin-bottom: 10px;}
  }
}


h1,h2,h3,h4,h5,h6,p {
  color: $text-color;
}
h1 {
  font-size: 8vw;
  font-family: serif;
  font-weight: bold;
}
p {
	line-height: $paragraph-line-height;
	margin-bottom: $paragraph-bottom-margin;
}

body.dragging {
  section {
    transform: scale(.7);
    transform-origin: center center;
  }
}

.slider-navigation {
  position: fixed;
  top: 5%;
  right: 50px;
  height: 90%;
  width: 4px;
  background: $text-color;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .tick {
    @if $ticks == false {
      display: none;
    }
    position: relative;
    cursor: pointer;
    height: 4px;
    width: 20px;
    background: $text-color;
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      transform: translateY(-50%);
      height: 40px;
      width: 100%;
      z-index: -1;
    }
  }

  .nav-pointer {
    position: absolute;
    top: 0;
    right: 0;
    background: $text-color;
    color: white;
    font-weight: 300;
    font-size: 12px;
    padding: 3px 8px;
    cursor: pointer;
    height: 22px;
    width: 44px;
    text-align: center;
    display: flex;
    align-items: center;
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      transform: translateY(-50%);
      height: 40px;
      width: 100%;
      z-index: -1;
    }
  }
}



body.dragging {
  cursor: grab;
  .nav-pointer {
    transition: none;
  }
}


View Compiled

$(document).ready(function() {

  $('section').each(function(){
    $('.slider-navigation').prepend('<div class="tick"></div>');
  });

  $('.tick').on('click',function(){
    var tickIndex = $(this).index();
    $('body').scrollTop( $(window).height() * tickIndex );
  });

  updatePos();

}); // end document ready


var isDragging = false;
var sliderTop,pointerPos,currentSection;

var bodyHeight = $('body').height();
var sliderHeight = $('.slider-navigation').height();
var elementHeight = $('section').height();
var sectionAmount = $('section').length;
var scale = (bodyHeight - (elementHeight)) / (sliderHeight - $('.nav-pointer').outerHeight() );


var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (!uniqueId) {
      uniqueId = "resize";
    }
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();


function updatePos() {
  currentSection = $(window).scrollTop() / elementHeight;
  currentSectionNum = Math.ceil(currentSection + 0.01) ;
  sliderTop = $(window).scrollTop() / scale;
  $('.nav-pointer').css('top', sliderTop).text(currentSectionNum + '/' + sectionAmount);
}

function sliderMove(e) {
  $('body').scrollTop(parseInt(e) * scale);
}

$(window).scroll(function(){
  if (!isDragging) {
    updatePos();
  }
});


$(window).resize(function () {
  waitForFinalEvent(function(){
    bodyHeight = $('body').height();
    sliderHeight = $('.slider-navigation').height();
    elementHeight = $('section').height();
    sectionAmount = $('section').length;
    scale = (bodyHeight - (elementHeight)) / (sliderHeight - $('.nav-pointer').outerHeight() );

    updatePos();
  }, 500, "resizing");
});


$(window).resize(function(){
  
});

$( ".draggable" ).draggable({
  axis: "y",
  containment: "parent",
  start: function() {
    isDragging = true;
    $('body').addClass('dragging');
  },
  drag: function() {
    pointerPos = $(this).css('top');
    sliderMove(pointerPos);
    updatePos();
  },
  stop: function() {
    isDragging = false;
    $('body').removeClass('dragging');
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js