<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ScrollSpy</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="outersec">
<div class="left-col">
<div class="inner">
<div class="header-div">
<p class="heading sc-sp-data-dis">第一章 路遇</p>
<div class="data">
<p>秋风瑟瑟，东林县草岭子乡中学教学楼门前的一片杨树林里，一些早败的枯枝黄叶被风吹得簌簌而落。</p>
<p>一溜小跑，叶平宇急匆匆地来到乡中学校园内，绕了一大圈，在杨树丛中的一颗小树前，终于找到了正站在风中暗泣不已的妹妹，心中一急，便转身带她向楼上的校长室跑去。
<p>乡中学校长此时正呆在校长室内，春风满面地与一名刚刚入职的年轻女教师说话聊天，叶平宇气喘吁吁地跑上楼层，砰砰地上前敲了几下门，没等到有人应声便推门而入。
<p>和校领导聊了一会天，年轻而又有些青涩的女教师一脸的娇羞不已，突然看到有人从外面进来，便急忙道了一声，扭身匆匆而去。
<p>叶平宇的到来无意中打扰了他与年轻女老师聊天的兴致，乡中学校长的眉头顿时皱成了一个川字，鼻梁上架着一副金边的眼镜，厚厚的镜片泛着冷光，看上去很不高兴，一副爱理不理的样子。
<p>与女教师擦肩而过，叶平宇闻到一股诱人的清香，抽了下鼻子，没有多想，急忙走到乡中学校长的办公桌前，伸出手，堆起笑容道：“赵校长，不好意思，这是我妹妹的学费，晚交了几天，请您收下……”
<p>说话间将钱交了过去，乡中学的校长接过钱后随手扔在了桌子上，“小叶，到现在还没交学费的就剩你妹妹了，要不是看着你的面子，早让她回家筹钱去了，好了，就这样吧！”
<p>看着乡中学校长那张板起的脸，叶平宇连忙表示感谢道：“赵校长，谢谢你了，您看，现在就让我妹妹回去上课吧……”
<p>稳稳地坐在那里，乡中学的校长沉着脸，一时没有出声，过了一会，才朝对面的房间喊了一声道：“胡老师，让叶芊芊去上课！”
<p>“谢谢了，谢谢了！”看到乡中学校长终于答应让妹妹去上课，叶平宇微笑着去握了一下乡中学校长的手，又说了两声谢谢，才带着妹妹走出了校长室。
<p>一出校长室，叶平宇便闪身把妹妹拉到一旁，切声地问道：“学费没交怎么不早跟我说，家里没钱了吗？”
<p>“爸妈说等卖完了米就给我交学费，现在米没卖完，没钱交！”用衣袖抹了一下眼睛，叶芊芊的脸上挂满了泪水。
<p>叶平宇一时默然，家里不大富裕，为了培养他和姐姐上大学，花光了家里所有的积蓄，而妹妹还在这里上初中，开学后学费拖了几周没有交，学校便通知家长，不让她上课了，让她回家筹钱去。
<p>得知这个情况，他急忙过来，还好之前见过乡中学的校长一面，不然即使交了学费，妹妹也不能立刻去上课，还要受老师的白眼，自己大小也是乡里的干部，这点面子学校还是要给的……
</div>
</div>
<div class="header-div">
<p class="heading sc-sp-data-dis">第二章 乡长的红人</p>
<div class="data">
<p>站在原地，叶平宇看着那中年男人远去后，低头看了看手中的小纸条，小心地保存起来，然后转身向不远处的草岭子乡政府大院走去。
<p>从安宁省经济学院毕业，分配到草岭子乡党政办工作，说来已经有三个多月，叶平宇走到乡政府大院门口，抬头看了看眼前已经熟悉的门楼和大铁门，便迈步走了进去。
<p>走进里面后，和看大门的老杨打了声招呼，便直接朝后面的党政办公室走去。
<p>草岭子乡党政办公室座落在一栋简陋的二层办公小楼内，整个空间显得非常的狭窄，在一个不到二十平米的老旧房间里，摆放着五六张破旧的桌椅，桌子上堆满了电话、报纸、文件材料等各种东西，看上去是乱糟糟的样子
<p>从窗外透入阳光，房间内的东西才能看得清清楚楚，叶平宇走进办公室后，目光一扫，就看到几名办公室的同事正在里面聊着天。
<p>前几天乡里面发生了一件爆炸性的事，正在乡里开会的乡委书记杨茂军和党政办主任牛振才突然被县纪委的人当场带走，至今都没有回来，乡里面现在是人心慌慌，几名办公室的同事也是忐忑不安，这几天大家私下聊着的一般都是这个事情。
<p>不过一看到他进来，那几名聊天的同事就迅速装模作样地坐了回去，一副从未发生过的样子，似乎把他当成了潜伏在办公室内专门来监视他们的探子。
<p>看到他们的样子，走到座位前，一屁股坐下，叶平宇想了想，不禁暗中发起笑来，自己从来不是那种爱打小报告的人，而办公室里倒是有人很喜欢打这种小报告。
<p>想到这里，叶平宇朝同事梁军那里看去，只见他正舒服地躺在自己的办公椅子上悠然自得，一双眯起的小眼睛不时地扫向旁边正在照着小镜的常芳身上。
</div>
</div>
<div class="header-div">
<p class="heading sc-sp-data-dis">list item 3</p>
<div class="data">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</div>
</div>
<div class="header-div">
<p class="heading sc-sp-data-dis">list item 4</p>
<div class="data">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</div>
</div>
<div class="header-div">
<p class="heading sc-sp-data-dis">list item 5</p>
<div class="data">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</div>
</div>
<div class="header-div">
<p class="heading sc-sp-data-dis">list item 6</p>
<div class="data">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</div>
</div>
<div class="header-div">
<p class="heading sc-sp-data-dis">list item 7</p>
<div class="data">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</div>
</div>
<div class="header-div">
<p class="heading sc-sp-data-dis">list item 8</p>
<div class="data">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</div>
</div>
<div class="header-div">
<p class="heading sc-sp-data-dis">list item 9</p>
<div class="data">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</div>
</div>
<div class="header-div">
<p class="heading sc-sp-data-dis">list item 10</p>
<div class="data">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</div>
</div>
</div>
</div>
<div class="right-col">
<div class="inner">
<ul>
<li>
<a href="" class="sc-sp-list">第一章 路遇</a>
</li>
<li>
<a href="#" class="sc-sp-list">第二章 乡长的红人</a>
</li>
<li>
<a href="#" class="sc-sp-list">list 3</a>
</li>
<li>
<a href="#" class="sc-sp-list">list 4</a>
</li>
<li>
<a href="#" class="sc-sp-list">list 5</a>
</li>
<li>
<a href="#" class="sc-sp-list">list 6</a>
</li>
<li>
<a href="#" class="sc-sp-list">list 7</a>
</li>
<li>
<a href="#" class="sc-sp-list">list 8</a>
</li>
<li>
<a href="#" class="sc-sp-list">list 9</a>
</li>
<li>
<a href="#" class="sc-sp-list">list 10</a>
</li>
</ul>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/script.js"></script>
</body>
</html>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Calibri;
font-size: 20px;
height: 100vh;
color: #333;
}
.outersec {
width: 100%;
padding: 15px 0;
height: 100%;
}
.outersec>.left-col,
.outersec>.right-col {
height: 100%;
display: inline-block;
margin-right: -4px;
vertical-align: top;
}
.outersec>.left-col>.inner,
.outersec>.right-col>.inner {
width: 100%;
overflow: auto;
}
.outersec>.right-col>.inner {
height: 100%;
}
.outersec>.right-col {
width: 250px;
border-left: 1px solid #444;
padding: 0 15px;
position: fixed;
right: 0;
}
.outersec>.right-col ul {
margin: 0;
padding: 0;
list-style: none;
}
.outersec>.right-col ul>li>a {
display: inline-block;
padding: 10px 15px;
text-decoration: none;
width: 100%;
background-color: #efefef;
margin-bottom: 10px;
color: #333;
}
.outersec>.right-col ul>li.active a,
.outersec>.right-col ul>li>a:hover {
background-color: #333;
color: #fff;
}
.outersec>.right-col ul>li:last-child>a {
margin-bottom: 0;
}
.outersec>.left-col {
width: calc(100% - 250px);
padding: 0 15px;
}
.outersec>.left-col .heading {
font-weight: 900;
text-transform: uppercase;
padding: 10px;
border: 1px solid #000;
background-color: gray;
color: #fff;
}
.outersec>.left-col .heading.active {
background-color: #333;
}
$(function () {
// ADDING DATA
(function () {
var inc = 0;
$('.sc-sp-data-dis').each(function () {
$(this).attr('data-scsp', "data" + inc)
inc++;
});
})();
(function () {
var inc = 0;
$('.sc-sp-list').each(function (ev) {
$(this).attr('data-scsp', "data" + inc)
inc++;
});
})();
$(window).on("load scroll", function () {
var windowScroll = $(this).scrollTop();
$(".sc-sp-data-dis").each(function () {
var thisOffsetTop = Math.round($(this).offset().top - 30);
if (windowScroll >= thisOffsetTop) {
var thisAttr = $(this).attr('data-scsp');
$('.sc-sp-list').parent().removeClass("active");
$('.sc-sp-list[data-scsp="' + thisAttr + '"]').parent().addClass("active");
}
});
});
$('.sc-sp-list').click(function (ev) {
ev.preventDefault();
var thisAttr = $(this).attr("data-scsp");
var scrollTo = $('.sc-sp-data-dis[data-scsp="' + thisAttr + '"]').offset().top;
$(this).parent().addClass("active").siblings().removeClass("active");
$(".sc-sp-data-dis").removeClass("active");
$('.sc-sp-data-dis[data-scsp="' + thisAttr + '"]').addClass("active");
$('html, body').animate({
scrollTop: scrollTo - 5
}, 150);
});
});
