Question

我正在使用来自这里的TOC插件TOC Code，我的一切都很好，左边的内容，几乎按照我的要求布局。我刚刚意识到，滚动或者折叠的树没有办法超出页面高度。

我的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
}

Answer 1

我只需要＆＃34;溢出-y：滚动＆＃34;

使用jQuery目录 - 页面内容太长

1 个答案: