JSFiddle - React, Tailwind, and code Playground

by smartmax

HTML

<div class="wall"></div>

<div class="header">
    <h3 id="logo">Логотип</h3>
<nav class="nav">
      <li><a href="#first">First</a></li>
      <li><a href="#second">Second</a></li>
      <li><a href="#thirst" class="">Thirst</a></li>
      <li><a href="#four">Four</a></li>
</nav>
</div>

<section id='first'>
  <h1>Прекращение залога</h1>
  <p>Действующая в&nbsp;настоящее время норма&nbsp;ст. 352&nbsp;ГК РФ&nbsp;также содержит исчерпывающий перечень оснований прекращения залога. Однако ст.352&nbsp;ГК РФ&nbsp;не&nbsp;предусматривает таких важных оснований прекращения залога как прекращение по&nbsp;соглашению сторон, прекращение по&nbsp;решению суда и&nbsp;прекращение в&nbsp;связи с&nbsp;переходом права собственности к&nbsp;залогодержателю. Что касается прекращения гражданских прав и&nbsp;обязанностей по&nbsp;решению судебных органов, ГК&nbsp;РФ&nbsp;вообще не&nbsp;предусматривает такой возможности.
  По&nbsp;всей видимости, исходя из&nbsp;существа гражданско-правового института залога, принципа свободы договора и&nbsp;положений процессуальных кодексов об&nbsp;обязательности исполнения вступивших в&nbsp;законную силу судебных решений. Все-таки можно говорить о&nbsp;том, что залог может быть прекращен как судебным решением, так и&nbsp;по&nbsp;согласию сторон, а&nbsp;также переходом права собственности на&nbsp;заложенное имущество, однако ввиду существования неотъемлемого постановления Пленума Верховного суда&nbsp;РФ такой вывод нуждается в&nbsp;дополнительном судебном толковании.
  Ряд проблем также связан с&nbsp;регулированием процесса реализации заложенного имущества с&nbsp;публичных торгов. Статья 349&nbsp;ГК РФ&nbsp;предусматривает две формы реализации  по&nbsp;решению суда и&nbsp;на&nbsp;основании нотариально удостоверенного соглашения залогодателя с&nbsp;залогодержателем, заключенного после возникновения оснований для обращения взыскания. В&nbsp;принципе возможность заключения соглашения о&nbsp;порядке обращения взыскания достаточно привлекательна для сторон,...

CSS

html, body {padding:0; margin:0; height: 100%;}
.wall {
    width: 100%;
    height: 100% !importnat;
    min-height: 100%;
    background: #ccc;
    margin: 0 auto;
}
.header {
    position: fixed;  
    right: 30px;
    top: 10px;
    background: rgba(205,182,141,0.5);
}
#logo {
    font: 200 18px Calibri;
    margin: 10px 0;
    cursor: pointer;
}
.nav > li {
    list-style: none;
    padding-bottom: 10px;
}
.nav > li a {
    color: blue;
    display: block;
    padding: 3px 0;
}
.nav > li a:hover {
    color: green;
}
.nav > li a.active {
    color: white;
    background-color: green;
}
section {
    display: block;
    border: 1px solid #ccc;
}

JavaScript

/* --- Логотип наверх --- */
$(document).ready(function(){
	$("#logo").click(function (){
		$("body,html").animate({
			scrollTop:0}, 800);
			return false;
		});
	});

/* --- Убираем класс action у ссылки на первый якорь --- */
$(window).scroll(function() {
if ($(this).scrollTop() > 500){  
    return false;
  }
  else{
    $('a.active').removeClass("active");
  }
});


jQuery(window).scroll(function(){
         var $sections = $('section');
	$sections.each(function(i,el){
        var top  = $(el).offset().top-100;
        var bottom = top +$(el).height();
        var scroll = $(window).scrollTop();
        var id = $(el).attr('id');
    	if( scroll > top && scroll < bottom){
            $('a.active').removeClass('active');
			$('a[href="#'+id+'"]').addClass('active');
        }  
      
    })
 });

$("nav").on("click","a", function (event) {
        // исключаем стандартную реакцию браузера
        event.preventDefault();
 
        // получем идентификатор блока из атрибута href
        var id  = $(this).attr('href'),
 
        // находим высоту, на которой расположен блок
            top = $(id).offset().top;
         
        // анимируем переход к блоку, время: 800 мс
        $('body,html').animate({scrollTop: top}, 800);
    });