html 左边菜单栏跟随滚轮并锚定右边子项目 

<!doctype html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>锚定滑动边栏</title>
        <script src="http://developer.baidu.com:80/resources/online/common/lib/jquery/jquery-1.9.1.min.js"></script>
        <style type="text/css">
            .container{
                background:#bbbfff;
            }
            .head{
                width:;
                height:100px;
                background:#fff000;
            }
            .warpper{
                overflow:hidden;
                background:#888f00;
            }
            .left{
                position:absolute;
                width:;
                height:;
                background:#0ff000;
            }
            .item{
                background:#00fff0;
                width:100px;
                height:;
            }
            .right{
                position:relative;
                left:150px;
                background:#00ff00;
            }
            .context{
                width:;
                height:100px;
                background:#D0CBC1;
                white-space:normal;  
                word-break:break-all;  
            }
            .foot{
                clear:both;
                width:;
                height:100px;
                background:#000fff;
            }
        </style>
    </head>
    <body>
        <div class="container">
            
            <div class="head">
                <h1>头部</h1>
            </div>
            <div class="warpper">
                <div class="left">
                    <ul class="menu">
                        <li></li>
                        <li class="item"><a href="#he1">项目1</a></li>
                        <li class="item"><a href="#he2">项目2</a></li>
                        <li class="item"><a href="#he3">项目3</a></li>
                        <li class="item"><a href="#he4">项目4</a></li>
                        <li class="item"><a href="#he5">项目5</a></li>
                        <li class="item"><a href="#he6">项目6</a></li>
                        <li class="item"><a href="#he7">项目7</a></li>
                    </ul>
                </div>
                <div class="right">
                    <strong id="he1">项目1</strong>
                    <div class="context">项目介绍</div>
                    <strong id="he2">项目2</strong>
                    <div class="context">项目介绍</div>
                    <strong id="he3">项目3</strong>
                    <div class="context">项目介绍</div>
                    <strong id="he4">项目4</strong>
                    <div class="context">项目介绍</div>
                    <strong id="he5">项目5</strong>
                    <div class="context">项目介绍</div>
                    <strong id="he6">项目6</strong>
                    <div class="context">项目介绍</div>
                    <strong id="he7">项目7</strong>
                    <div class="context">项目介绍</div>
                </div>
            </div>
            <div class="foot">底部</div>
        </div>
    </body>
</html>
<script type="text/javascript">
//左边栏随滑动条滚动IE CROME FIREFOX
window.onscroll = function(){
    var scroll_top_x = document.documentElement.scrollTop || document.body.scrollTop;
    var left_top_x = $(".left").offset().top;
    var move_x =  0 ;
    if( scroll_top_x > left_top_x){ move_x = scroll_top_x - left_top_x; }
    var menu_height = $(".menu").height();
    var menu_top_x = $(".menu").offset().top;
    var left_height = menu_height + menu_top_x;
    var right_height = $(".right").height() + $(".right").offset().top;
    if(right_height>left_height){
        $(".menu").css({'margin-top':(move_x)+'px'});
    }else{
        move_x = right_height - left_top_x - $(".menu").height();
        $(".menu").css({'margin-top':(move_x)+'px'});
    }
}
</script>

 

posted @ 2016-12-19 12:42  蔡昊  阅读(665)  评论(0)    收藏  举报