側邊固定導航效果

時間 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。