<div class="floatNav"> <div class="curPart">导航</div> <ul class="subClass"> <li ><a href="">玄玄博客</a></li> <li ><a href="">玄玄博客</a></li> <li ><a href="">玄玄博客</a></li> <li ><a href="">玄玄博客</a></li> <li ><a href="">玄玄博客</a></li> <li ><a href="">玄玄博客</a></li> </ul> </div>
<script type="text/javascript"> // 左侧菜单滚动 $(window).load(function() { var scrollObj = $('.pageLeft'); if (scrollObj[0]) { if (scrollObj.height() < $('.pageRight').height()) { var offsetLeft = scrollObj.offset().left, objOffsetTop = scrollObj.offset().top, objHeight = scrollObj.height(), windowHeight = $(document).height(), objFooter = $('.footer'), footer = objFooter.offset().top, footerMarginTop = objFooter.css('margin-top'), footerMarginTop = footerMarginTop.replace('px', ''); $(window).scroll(function(e){ var scrollTop = $(document).scrollTop(); if (scrollTop >= objOffsetTop) { scrollObj.addClass('fixed'); if ( scrollTop >= ( footer - objHeight - parseInt(footerMarginTop))) { scrollObj.css({'top':(-((objHeight+scrollTop+objFooter.height()+parseInt(footerMarginTop))-windowHeight + 45))+'px'}); } } else { scrollObj.removeClass('fixed'); } }); } } }); }); </script>
.fixed{position:fixed;top:0px;_position: absolute;_top:expression(documentElement.scrollTop+10 + "px");} .floatNav{width:220px;overflow:hidden;} .pageLeft{float:left;width:220px;} .curPart{width:218px;height:70px;line-height:70px;border-top:5px solid #fb7305;border-left:1px solid #d3d3d3;border-right:1px solid #d3d3d3;font-size:18px;font-family:'Microsoft YaHei';color:#000;text-indent:30px;} ul.subClass{float:left;width:218px;border-top:1px solid #d3d3d3;border-right:1px solid #d3d3d3;border-left:1px solid #d3d3d3;} ul.subClass li{float:left;border-bottom:1px solid #d3d3d3;height:35px;width:100%;overflow:hidden;} ul.subClass li a{display:block;width:100%;height:35px;line-height:35px;text-indent:31px;color:#595959;cursor: pointer;} ul.subClass li a:hover,ul.subClass li.curr a{background:#fb7305;color:#fff}