侧边固定导航效果

时间 2019-12-09

标签侧边固定导航效果繁體版

原文原文链接

以前在项目中作过这么个侧边固定导航效果，把它摘下来，总结下。
实现：
1.当页面滚动到主体部分时，侧边导航固定在浏览器的左上方，且在主体部份内滚动时才固定在浏览器的左上方，当侧边导航滚动到主体底部时，侧边导航回到最初状态
2.当页面滚动到右侧内容相应区域时，侧边对应按钮高亮
2.点击左侧导航按钮，页面会滚动到导航对应的内容
图：
javascript

1.结构样式简单的说下

侧边导航和右侧主体部分分别左右浮动。侧边导航代码是动态生成的css

2.jquery思路

(1).首先侧边导航的个数与右侧的主体的标题的个数是相同的，
var subcont_length = $(".subcont").length;//获取主题标题的个数

(2). 滚动条滚动到必定位置，侧边导航固定在浏览器的左上角

判断条件：最小滚动：侧边导航的.offset().top减去侧边导航固定的top值
最大滚动：父元素的高度+父元素的.offset().top减去侧边导航自身的高度
(3)侧边导航滚动高亮

判断条件：向下滚动，只要下一区域内容滚到侧边导航底部位置，这一区域对应导航就高亮；向上滚动，只要上一区域内容出现到侧边导航底部位置，这一区域对应导航就高亮
(4)侧边导航点击导航按钮，按钮高亮，网页滚动到到相应区域
html

3.附录（代码）

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>侧边固定导航效果</title>
<style>
/*辅助代码*/
body {
    font-family: "Microsoft YaHei", 微软雅黑;
    margin:0;
    padding:0;
}
a {
    font-size: 12px;
    color: #333333;
    text-decoration: none;
    cursor: pointer;
}
i, em {
    font-style: normal;
}
ul, ol, li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.product_detail{
    width: 1200px;
    margin: 0px auto;
    overflow:hidden;
}
.xc_main {
    width: 1070px;
    float: right;
}
.xc_main li:nth-child(4n+1){background: #5DB2FF;height:500px;}
.xc_main li:nth-child(4n+2){background: #FB6E52;height:500px;}
.xc_main li:nth-child(4n+3){background: #E75B8D;height:500px;}
.xc_main li:nth-child(4n+4){background: #A0D468;height:500px;}


/*侧边导航*/
.leftsidebar {
    float: left;
    width: 100px;
    z-index: 99;
}
.leftsidebar li {
    width: 70px;
    text-align: center;
    background: #e5e5e5;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    height: 30px;
    line-height: 30px;
    margin-bottom: 5px;
    position: relative;
}
.leftsidebar li:hover, .leftsidebar li.on ,.leftsidebar li:hover a, .leftsidebar li.on a{
    background: #0099d9;
    color: #FFF;
}
.leftsidebar li a {
    display: inline-block;
    width: 70px;
    font-size: 14px;
    color: #999;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.icon_tag {
    display: inline-block;
    vertical-align: middle;
    background-image: url(icon-product.png);
}
.leftsidebar .arrow-right{
    background-position:-734px -167px;
    display: none;
    height: 12px;
    width: 10px;
    margin-top: -6px;
    position: absolute;
    right: -10px;
    top: 50%;
}
.leftsidebar li.on .arrow-right {
    display: block;
}
.sub_fixed{
    position:fixed;
}
</style>
</head>
<body>  
<div class="product_detail">
<h2>行程介绍</h2>
    <ul class="xc_main">
        <li>第1天</li>
        <li>第2天</li>
        <li>第3天</li>    
        <li>第4天</li>
        <li>第5天</li>
        <li>第6天</li>
    </ul>
</div>          
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function sidebarlight(obj,top) { //obj为右侧内容父元素的class或id,top为侧边导航处于position：relative时top的取值
        var subcont_length = $(obj).children("li").length;//获取主题标题的个数
        //js动态添加侧边导航代码
        var start = '<div class="leftsidebar"><ul>',
            content = '',
            end = '</ul></div>';
        for(var i = 0; i <= subcont_length-1; i++){
            var n=i+1;
            content += '<li>' + '<a href="javascript:;">' +'<em>' +"第"+ n +"天"+'</em>' +'<i class="arrow-right icon_tag"></i>' + '</a>' + '</li>';
        }
        
        $(obj).before(start + content + end);   
                                            
        //滚动条滚动到必定位置，侧边导航固定在浏览器的左上20px，且侧边导航滚动高亮    
        var subT = $(".leftsidebar").offset().top;
        var subH= $(".leftsidebar").height();
        var objH=$(obj).height();
        var objT=$(obj).offset().top;
        var subliH= $(".leftsidebar li").eq(0).outerHeight(true);
        $(window).scroll(function(){
            var scroH = $(this).scrollTop();        
            if(scroH>=subT-parseInt(top)&&scroH<=parseInt(objH)+objT-subH){
                $(".leftsidebar").addClass("sub_fixed");
                $(".sub_fixed").css("top",top);
            }
            else if(scroH<subT-parseInt(top)){
                $(".leftsidebar").removeClass("sub_fixed");             
            }
            else if (scroH >parseInt(objH)+objT-subH) {
                $(".leftsidebar").removeClass("sub_fixed");
            }
            //侧边导航滚动高亮
            for (var i = subcont_length - 1; i >= 0; i--) { 
                var subtop=$(obj).children("li").eq(i).offset().top;
                if ($(window).scrollTop()>= subtop-subliH*(i+1)-parseInt(top)) {
                                //若是滚动条滚动的距离大于等于右侧的内容区域的.offset().top                               
                                //减去侧边导航的高度再减去侧边导航固定的top值，对应导航按钮高亮                                
                    $(".leftsidebar li").removeAttr("class");
                    $(".leftsidebar li").eq(i).attr("class", "on");
                    break;
                }
            }
        })
        //侧边导航点击导航按钮，按钮高亮，网页滚动到到相应区域
        $(".leftsidebar li").on("click", function() {
            var index = $(this).index();//判断点击的选项是第几个
            a = $(obj).children("li").eq(index);//对应第几个内容对象
            b= a.offset().top;
            $(this).addClass("on").siblings().removeClass("on");                    
            $("body,html").animate({scrollTop:b-subliH*index-parseInt(top)},400);           
        })
        $(".leftsidebar li").eq(0).attr("class", "on");
 }
sidebarlight(".xc_main","20px");
</script>
</body>
</html>

备注：想在把代码改进下，设置侧边导航的内容设置为主体内容区域的标题内容，大体有这么个思路：把内容部分对应的.offset().top和标题内容push到数组中，for循环时去取数组中的值，如今就先这样吧。java

本文为原创，如需转载请注明转载地址，谢谢合做！
本文地址：http://www.cnblogs.com/wanghuih/p/6504360.htmljquery