Я использую плагин TOC отсюда TOC Code, у меня есть все, что работает, просто отлично, содержимое слева, выложенное почти так, как я хотел. Я просто понял, что нет ни одного прокрутки или, может быть, рушившегося дерева, содержимое которого превысило высоту страницы.Использование jQuery Содержание - слишком длинное содержание для страницы
Мои CSS невелики, поэтому некоторые дополнительные помощь здесь будут очень признательны. Код, я использую здесь:
$('#toc').toc({
'selectors': 'h1,h2,h3', //elements to use as headings
'container': 'body', //element to find all selectors in
'smoothScrolling': true, //enable or disable smooth scrolling on click
'prefix': 'toc', //prefix for anchor tags and class names
'onHighlight': function(el) {}, //called when a new section is highlighted
'highlightOnScroll': true, //add class to heading that is currently in focus
'highlightOffset': 100, //offset to trigger the next headline
'anchorName': function(i, heading, prefix) { //custom function for anchor name
return prefix + i;
},
'headerText': function(i, heading, $heading) { //custom function building the header-item text
return $heading.text();
},
'itemClass': function(i, heading, $heading, prefix) { // custom function for item class
return $heading[0].tagName.toLowerCase();
}
});
#wrapper {
margin: 0 20px 0 180px
}
a {
color: #369
}
body {
font-size: 16px;
line-height: 24px;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
background: black;
color: white
}
article {
max-width: 944px;
margin: auto
}
h1 {
font-size: 80px;
line-height: 80px;
margin-top: 24px;
margin-bottom: 48px
}
h2 {
font-size: 42px;
line-height: 48px;
margin-top: 36px;
margin-bottom: 24px
}
h3 {
font-size: 26px;
line-height: 48px;
margin-top: 24px;
margin-bottom: 0
}
h1,
h2,
h3,
#toc a {
font-family: 'Voces', sans-serif
}
p,
ul {
margin-top: 0;
margin-bottom: 24px
}
small,
aside {
font-size: 10px
}
code {
word-wrap: break-word
}
.repo-stats iframe {
float: right;
margin-left: 5px
}
#toc {
top: 0;
left: 0;
height: 100%;
position: fixed;
background: #333;
box-shadow: inset -5px 0 5px 0 #000;
width: 170px;
padding-top: 20px;
color: #fff
}
#toc ul {
margin: 0;
padding: 0;
list-style: none
}
#toc li {
padding: 5px 10px
}
#toc a {
color: #fff;
text-decoration: none;
display: block
}
#toc .toc-h2 {
padding-left: 10px
}
#toc .toc-h3 {
padding-left: 30px
}
#toc .toc-active {
background: #369;
box-shadow: inset -5px 0 10px -5px #000
}
Что вопрос? –
1) Спасибо Rory 2) Существует ли реалистичный способ прокрутки левой панели или, возможно, древовидного разрушения, чтобы использовать ее? –