今天給大家分享一個側邊目錄導航，它能隨內容滾動而變化。

側邊目錄導航隨內容滾動而變化

下面是實現代碼

HTML

<ul class="side_nav">
    <dt class="f-hover"><i class="i1"><i class="i2"></i></i><i class="i3"></i><strong>游戲推薦</strong></dt>
    <dt class=""><i class="i1"><i class="i2"></i></i><i class="i3"></i><strong>應用推薦</strong></dt>
    <dt class=""><i class="i1"><i class="i2"></i></i><i class="i3"></i><strong>最新專題</strong></dt>
    <dt class=""><i class="i1"><i class="i2"></i></i><i class="i3"></i><strong>知識專欄</strong></dt>
    <dt class=""><i class="i1"><i class="i2"></i></i><i class="i3"></i><strong>高清美圖</strong></dt>
    <dt class=""><i class="i1"><i class="i2"></i></i><i class="i3"></i><strong>精彩視頻</strong></dt>
    <dd></dd>
</ul>
<div class="container">
  <div class="side_nav_scroll">游戲推薦</div>
  <div class="side_nav_scroll">應用推薦</div>
  <div class="side_nav_scroll">最新專題</div>
  <div class="side_nav_scroll">知識專欄</div>
  <div class="side_nav_scroll">高清美圖</div>
  <div class="side_nav_scroll">精彩視頻</div>
</div>

CSS

.side_nav {line-height:34px;color:#999;width:138px; height: 385px; display: block; overflow: hidden; position: fixed; left:10px; bottom: 20px;z-index:999;}
.side_nav dt {width: 100%; height: auto; margin: 10px 0 0; display: block; position: relative; zoom: 1; z-index: 10; cursor: pointer; }
.side_nav dt .i1{border:2px solid #e7e7e7;width:18px;height:18px;border-radius:18px;z-index:9;position:absolute;background-color:#fff;left:0px;}
.side_nav dt .i2 {width: 12px; height: 12px; border: 2px solid #f4f4f4; background: #f4f4f4; border-radius:12px; box-shadow: inset 0px 0px 3px #518ABC, inset 0px 0px 3px #518ABC, inset 0px 0px 3px #518ABC, inset 0px 0px 3px #518ABC;display:block;margin:1px 0 0 1px;}
.side_nav dt .i3{display:block;width:0;border:3px solid #e7e7e7;border-radius:6px;position:relative;left: 22px;top:9px; }
.side_nav dt strong {padding:2px 15px 4px 15px;font-size:14px; font-weight: normal; color: #333; background:#e7e7e7; border-radius: 4px;position:relative;left:28px;border-radius:20px;top:-13px;}
.side_nav .f-hover strong {background:#518ABC; color: #fff;}
.side_nav .f-hover .i1, .side_nav .f-hover .i3{border-color:#518abc;}
.side_nav .f-hover .i2{background:#518ABC;}
.side_nav dd {width:1px;height:265px; background: #aaa; position: absolute; left:10px; top:30px; display: block;overflow:hidden;} 

.container{width:50%;float:right;height:auto;}
.side_nav_scroll{width:100%;height:300px;}

JS

<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){

    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        var forSize = $(".side_nav_scroll").length;
        for(i=0;i<forSize;i++){
            var plateTop = $(".side_nav_scroll").eq(i).offset().top;
            if(scrollTop+120>=plateTop){
                $(".side_nav dt").eq(i).addClass("f-hover").siblings("dt").removeClass("f-hover");
            }
        }
    })
    $(".side_nav dt").click(function(){
        var n = $(this).index();
        var plateTop = $(".side_nav_scroll").eq(n).offset().top;
        $("body,html").animate({scrollTop:plateTop},160)
    })

})
</script>

execcodegetcode

代碼解釋

1、HTML代碼中，container 的div是內容區域，side_nav_scroll 的div是導航各目錄對應的內容。

2、CSS .side_nav {...left:10px; bottom: 20px;...} 是設置導航的位置。

.container{width:50%;float:right;height:auto;} 設置內容區域大小及位置。

.side_nav_scroll{width:100%;height:300px;} 設置目錄內容區域大小高度。

3、JS代碼需要引用jquery庫文件。

      $("body,html").animate({scrollTop:plateTop},160) 是點擊導航目錄時滾動到對應內容位置的速度。

標簽: 導航菜單  目錄導航  導航欄  css  css3