Дополнительный просмотр записи [InstantCMS 2*]

 
<style>
ul.show-all-h2 {
  list-style-type: decimal;
  margin: 0;
  padding: 0;
}
ul.show-all-h2 li {
  margin: 0 20px 5px 20px;
  padding: 0;
}
.article-read-h2-outer {
  width: 130px;
  position: absolute;
  z-index:20;
  padding-bottom:210px;
}
.article-read-h2-outer.fixed {
  position: fixed;
  top:0;
}
.content_item {
  padding-left:150px;
}
@media screen and (max-width: 540px){
	.article-read-h2-outer {
	  display: none;
	}
	.content_item {
	  padding-left:0px;
	}
}
</style>
<script type="text/javascript" src="http://areaaperta.com/nicescroll/js/jquery.nicescroll.min.js"></script> 
<!-- Подключаем плагин скроллинга во избежание "скачков" в Google Chrome -->
<script type="text/javascript">
	if($('.content_item h2.iwantlist').length) {
		$(function() { 
			$(".content_item").niceScroll();
			$(".content_item").before( $('<div class="article-read-h2-outer"> <div class="article-read-h2"> <h3>Оглавление:</h3> <ul class="show-all-h2"></ul> </div> </div>') );
			var h2link = (function(i){return "#anchoron" + (i + 1);});
			var h2title = (function(i){return "anchoron" + (i + 1);});
			$('.content_item h2').clone().addClass('h2-list').prependTo('ul.show-all-h2').wrap("<li class='show-li-h2'><a href=''></a></li>"); 
			$('h2.h2-list').contents().unwrap(); 
			$(".content_item h2").attr('id', h2title);
			$('li.show-li-h2 a').attr('href', h2link); 
			$('li.show-li-h2 a').click(function(){
			    $('html, body').animate({
			        scrollTop: $( $.attr(this, 'href') ).offset().top
			    }, 300);
			    return false;
			});
			$(window).scroll(function(){
		      var w = $(".content_item").height()-20;
		      var w1 = $('.content_item').offset().top;
		      var w2 = $('.article-read-h2').height();
		      var w4 = w2 - w1;
		      if ($(this).scrollTop() > w1 && $(this).scrollTop() < w-w4) {
		          $('.article-read-h2-outer').addClass('fixed').css("padding-top", 0);
		      } else {
		         if ($(this).scrollTop() > w-w4) {
		          $('.article-read-h2-outer').css("padding-top", w-w2);
		         };
		         $('.article-read-h2-outer').removeClass('fixed');
		      };
			});
		}); 
	} else {
		$(".content_item").css("padding-left", 0);
	};
</script>