<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=divice-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>website</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css"><!--semantic css-->
</head>
<body>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js" type="text/javascript"></script>
</body>
</html>/* It's about the trick of sticky table
** I used the Toc jQuery plugin http://projects.jga.me/toc/
** But it exludes the sticky function, And I found this feature on Qiita & segmentfault.
*/
.tocTree{
width: 270px;postition: relative;top: 0px;
}
/* When scroll close to the toc, it got changed by js*/
.tocTree{
width: 270px;postition: fixed;top: 0px;
}
/* And Another thing should be paid attention is the whole article should layout flex
** e.g. row column80 column10
** The TOC should conclude in column10, and before there shoud have a div placeholder, when TOC become fixed, it could work.
*/
.toc-placeholder{
position: relative; top: 0px; height: 10px;width: 270px;
}这里做js时需要考虑到header和footer的情况(>300 hearder高度， -240 footer高度)
var stickyTop = '200';
$(window).on('scroll', function(argument) {
if ($(window).scrollTop() >= 300) {
$("#toc").css('position','fixed').css('top','5rem');
if ($(window).scrollTop() > ($(document).height()-$(window).height()-240)) {
$("#toc").css('position','fixed').css('top','auto').css('bottom','260px');
}
}else{
$("#toc").css('position','relative').css('top','10rem');
}
});<div id="back-to-top">
<a href="#"><div>TOP</div></a>
<a href="javascript:window.scrollTo(0,document.body.scrollHeight);">BOT</a>
</div>
#back-to-top {text-align: center;position: fixed;right: 10px;bottom: 10%;width: 40px;background: white;border: 1px solid #60a773;color: #60a773;}https://css-tricks.com/line-clampin/
.overflow {
--max-lines: 3;
position: relative;
max-height: calc(var(--lh) * var(--max-lines));
overflow: hidden;
padding-right: 1rem; /* space for ellipsis */
}
.overflow::before {
position: absolute;
content: "...";
/* inset-block-end: 0;
inset-inline-end: 0; */
bottom: 0;
right: 0;
}
.overflow::after {
content: "";
position: absolute;
/* inset-inline-end: 0; */
right: 0;
width: 1rem;
height: 1rem;
background: white;
}
.fade {
position: relative;
height: 4.2rem; /* exactly three lines */
overflow-y: hidden;
}
.fade:after {
content: "";
text-align: right;
position: absolute;
bottom: 0;
right: 0;
width: 30%;
height: 1.2em;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}