beegostudy左边栏实现方式

beegostudy 左边栏实现

左边栏参考了bootstrap实现方式，下面给出主要的代码片段

?

左边栏html代码

?

<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav affix-top" id="sidebar">
<li class="active"><a href="/"><i class="glyphicon-chevron-right"></i> all</a></li>
{{range .categories}}
<li><a href="#typography"><i class="glyphicon-chevron-right"></i> {{.Name}}</a></li>
{{end}}
</ul>
</div>

?

左边栏css样式

/* Base styles are not affixable given mobile-first */
.bs-docs-sidenav {
  padding-top: -20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.bs-docs-sidenav.affix {
  position: static;
  top: 0;
  margin-top:10px;
}

/* Chevrons within each link */
.bs-docs-sidenav .glyphicon-chevron-right {
  float: right;
  margin-top: 1px;
  margin-right: -6px;
  opacity: .25;
  color: #000;
}
.bs-docs-sidenav a:hover .glyphicon-chevron-right {
  opacity: .5;
}
.bs-docs-sidenav .active .glyphicon-chevron-right,
.bs-docs-sidenav .active a:hover .glyphicon-chevron-right {
  color: #fff;
  opacity: 1;
}

?

左边栏js 滚动检测代码

setTimeout(function () {
    $(‘.bs-docs-sidenav‘).affix({
        offset: {
            top: 340
            ,
            bottom: 270
        }
    })
}, 100)

?

引入css

<link href="../static/css/bootstrap.css" rel="stylesheet">
引入js
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/prettify/r224/prettify.js"></script>

?

beegostudy?http://www.threeperson.com/articles/2043

beegostudy左边栏实现方式

原文：http://zld406504302.iteye.com/blog/2264577