网站左侧悬浮导航

1616

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

玄玄博客 http://www.blogxuan.com/