LADYX,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(document).on("scroll", onScroll);
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('panel-pp-active');
})
$(this).addClass('panel-pp-active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top -48
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#panel-pp a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top - 48 <= scrollPos && refElement.position().top - 48 + refElement.height() > scrollPos) {
$('#panel-pp ul li a').removeClass("panel-pp-active");
currLink.addClass("panel-pp-active");
var pageURL = $(location). attr("href");
var splittedURL = pageURL.split('/')[0];
}
else{
currLink.removeClass("panel-pp-active");
}
});
}
</script>
</head>
<body>
<style>
body, html {
margin: 0;
padding: 0 0 0 160px;
height: 100%;
width: 100%;
}
#panel-pp {
width: 150px;
height: 100%;
display: block;
position: fixed;
top: 0;
left: 0;
background: #fff;
background: rgba(255,255,255,1);
-webkit-box-shadow: -1px 0px 5px rgba(0,0,0,.4);
-moz-box-shadow: -1px 0px 5px rgba(0,0,0,.4);
box-shadow: -1px 0px 5px rgba(0,0,0,.4);
z-index: 11;
}
#panel-pp ul {
margin: 15px 0 0 0;
}
#panel-pp ul li {
list-style: none;
}
.panel-pp-main {
padding: 10px 20px;
}
.panel-pp-main a {
font-size: 16px;
line-height: 30px;
font-family: PT Serif,Georgia,Times New Roman,Times,serif;
text-decoration: none;
color: #333;
}
.panel-pp-main .panel-pp-active {
color: #da251e;
color: rgb(218,37,30);
}
#pp1,
#pp2,
#pp3 {
height: 300px;
}
</style>
1<br>1<br>1<br>1<br>1<br>1<br>1 <br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br> 1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1 <br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<div id="pp1">Секция 1</div>
<div id="pp2">Секция 2</div>
<div id="pp3">Секция 3</div>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br> 1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br> 1<br>1<br>1<br>1<br>1<br>1<br>
<div id="panel-pp">
<div class="panel-pp-main">
<ul>
<li><a href="#pp1">Один</a></li>
<li><a href="#pp2">Два</a></li>
<li><a href="#pp3">Три</a></li>
</ul>
</div>
</div>
</body>
</html>