Фиксированная вертикальная навигация

Боковая навигация даст пользователю возможность быстро перемещается по секциям страницы.
Это просто альтернативный способ навигации, который можно использовать в дополнение к основной, если страница содержит много контента.
Для работы компонента с сенсорными устройствами задействуем Modernizr.

ДЕМО

<a class="cd-nav-trigger cd-img-replace">navigation</a>
<nav id="cd-vertical-nav" >
  <ul>
    <li>
      <a href="#section1" data-number="1">
        <span class="cd-dot"></span>
        <span class="cd-label">Item 1</span>
      </a>
    </li>
    <!-- other navigation items here-->
  </ul>
</nav>

<section id="section1" class="cd-section">
   <!-- content-->
</section>

<section id="section2" class="cd-section">
   <!-- content -->
</section>

.no-touch #cd-vertical-nav { /* фиксация навигации */
  position: fixed;
  right: 40px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

.no-touch #cd-vertical-nav a span {
  float: right;
  transform: scale(0.6); /* уменьшение размера */
}

.no-touch #cd-vertical-nav .cd-dot {
  transform-origin: 50% 50%;
}

.no-touch #cd-vertical-nav .cd-label {
  transform-origin: 100% 50%;
}

.no-touch #vertical-nav a:hover span {
  transform: scale(1); /* увеличение размера */
}

.no-touch #cd-vertical-nav a:hover .cd-label {
  opacity: 1; /* показ надписи */
}

.touch #cd-vertical-nav {
  position: fixed;
  z-index: 1;
  right: 5%;
  bottom: 30px;
  width: 90%;
  max-width: 400px;
  max-height: 90%;
  transform: scale(0);
  transition-property: transform;
  transition-duration: 0.2s;
}

.touch #cd-vertical-nav.open {
  transform: scale(1);
}

jQuery(document).ready(function($){
	var contentSections = $('.cd-section'),
		navigationItems = $('#cd-vertical-nav a');

	updateNavigation();
	$(window).on('scroll', function(){
		updateNavigation();
	});

	//smooth scroll to the section
	navigationItems.on('click', function(event){
        event.preventDefault();
        smoothScroll($(this.hash));
    });
    //smooth scroll to second section
    $('.cd-scroll-down').on('click', function(event){
        event.preventDefault();
        smoothScroll($(this.hash));
    });

    //open-close navigation on touch devices
    $('.touch .cd-nav-trigger').on('click', function(){
    	$('.touch #cd-vertical-nav').toggleClass('open');
  
    });
    //close navigation on touch devices when selectin an elemnt from the list
    $('.touch #cd-vertical-nav a').on('click', function(){
    	$('.touch #cd-vertical-nav').removeClass('open');
    });

	function updateNavigation() {
		contentSections.each(function(){
			$this = $(this);
			var activeSection = $('#cd-vertical-nav a[href="#'+$this.attr('id')+'"]').data('number') - 1;
			if ( ( $this.offset().top - $(window).height()/2 < $(window).scrollTop() ) && ( $this.offset().top + $this.height() - $(window).height()/2 > $(window).scrollTop() ) ) {
				navigationItems.eq(activeSection).addClass('is-selected');
			}else {
				navigationItems.eq(activeSection).removeClass('is-selected');
			}
		});
	}

	function smoothScroll(target) {
        $('body,html').animate(
        	{'scrollTop':target.offset().top},
        	600
        );
	}
});

ДЕМО