我有一个开发页面，其侧边栏名为“blog-sidebar”。我希望在滚动时上下浮动，但停在页面容器的末尾。目前它一直滚动到页面的底部页脚，整体覆盖一些底部的div和页脚。 如何才能使其仅在页面的该部分中向上和向下滚动。
由于
http://pmg.dekastudiotest.net.au/communication.html
1 class Thing
2 {
3 public:
4 char c;
5 int *p;
6 float& f;
7 Thing(char ch, float x) { c = ch; p = &x; f = x; }
9 };
/* BLOG */
.blog{ width:100%; float:left; padding:50px 0; overflow: hidden;}
.blog *{-moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease;}
.blog .blog-post{ width:100%; float:left; padding-right:20px; margin-bottom:50px;}
.blog figure{ width:100%;float:left; margin-bottom:20px; position:relative; background:#febd0e;}
.blog figure img{ width:100%; float:left;}
.blog figure:hover img{ opacity:0.7;}
.blog h3{ display:block; margin-top:0; color:#febd0e;}
.blog small{ display:block; margin-bottom:10px; color:#98989a; font-weight:700;}
.blog .border{ width:38px; height:3px; display:inline-block; margin-bottom:30px; background:#febd0e;}
.blog .link {font-size:18px; font-weight:700; border-bottom:3px solid #febd0e; padding-bottom:6px; color:#febd0e;}
.blog .link:hover{ text-decoration:none;}
.blog .pagination{ width:100%; float:left;}
.blog .pagination>li{ float:left;}
.blog .pagination>li a{ float:left; border:1px dotted #ccc; font-weight:700; font-size:12px; padding:6px 22px; color:#2f2e33; border-radius:0 !important;}
.blog .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{ background:#febd0e; color:#fff;}
/* SIDEBAR */
.blog-sidebar{ width:300px; padding-left:30px; position:fixed; }
.blog-sidebar .widgets{ width:100%; float:left; margin-bottom:40px;}
.blog-sidebar .social-media{ width:100%; float:left;}
.blog-sidebar .social-media ul{ width:100%; float:left;}
.blog-sidebar .social-media ul li{ width:34px; height:34px; line-height:34px; float:left; text-align:center; background:red; margin-right:4px;}
.blog-sidebar .social-media ul li a{ display:inline-block; font-size:17px; color:#fff;}
.blog-sidebar .social-media ul li.facebook{ background:#3b5999;}
.blog-sidebar .social-media ul li.twitter{ background:#00bcf8;}
.blog-sidebar .social-media ul li.googleplus{ background:#d3492d;}
.blog-sidebar .social-media ul li.instagram{ background:#5989b9;}
.blog-sidebar .social-media ul li.pinterest{ background:#f63234;}
.blog-sidebar .social-media ul li.youtube{ background:#fe0000;}
.blog-sidebar .search{ width:100%; float:left;}
.blog-sidebar .search form{ width:100%; float:left;}
.blog-sidebar .search form input[type="text"]{ width:80%; float:left;}
.blog-sidebar .search form button[type="submit"]{ width:20%; padding:0; text-align:center; float:left; background:#febd0e; color:#fff; margin-left:-3px;}
.blog-sidebar .tags{ width:100%; float:left;}
.blog-sidebar .tags a{ float:left; padding-bottom:5px; border-bottom:2px solid #eee; font-size:12px; color:#999; margin-right:10px; margin-bottom:10px;}
.blog-sidebar .tags a:hover{text-decoration:none; color:#00cadf;}
.blog-sidebar .categories{ width:100%; float:left;}
.blog-sidebar .categories ul{ width:100%; float:left;}
.blog-sidebar .categories ul li{ width:100%; float:left; margin:4px 0;}
.blog-sidebar .categories ul li a{ float:left; color:#003D98; font-weight:500;}
.blog-sidebar .categories ul li a:hover{color:#00cadf;}
.blog-sidebar .gallery-thumbs{ width:100%; float:left; margin-left:-5px; margin-right:-5px;}
.blog-sidebar .gallery-thumbs a{ width:33.33333%; float:left; padding:5px;}
.blog-sidebar .gallery-thumbs a img{ width:100%; float:left;}