实现左侧瞄点导航

效果图

3.script

var windowHeight = $(window).height()

var flag = false

// 点击左侧瞄点导航

$('.wc-nav-sidebar a').on('click', function () {

   $(this).parent().addClass('active').siblings().removeClass('active')

    flag = true

    var targetElement = $(this.hash); // 获取目标id元素

    var targetOffset = targetElement.offset().top; // 获取目标元素offset值

   

    $('html,body').animate({

        scrollTop: targetOffset - windowHeight / 3 // 目标元素滚动到显示高亮的位置（大概在屏幕中间）

    }, 500, 'swing', function () {

        flag = false

    });

})

// 滚动页面绑定左侧瞄点导航对应的a href

$(document).ready(function () {

    $(window).scroll(function () {

        var top = $(document).scrollTop();          //获取滚动条的高度

        var menu = $(".wc-nav-sidebar");        

        var items = $(".titile");    

        var curId = "";                            

        items.each(function () {

            var m = $(this);

            var itemsTop = m.offset().top;          //获取当前 类的top偏移量

            if (top > itemsTop - 500) {

                curId = "#" + m.attr("id");  

            } else {

                return false;

            }

        });

        //console.log(curId)

        $(".wc-nav-sidebar").find("a[href='"+curId+"']").parent().addClass('active').siblings().removeClass('active')

    });

});

2.style

.wc-nav-sidebar{

    padding-left: 20px;

}

.affix{

    width: 263px;

    position: fixed;

    top: 20px;

}

.nav{

    padding-left: 0;

    list-style: none;

}

.wc-nav-sidebar .nav > li > a {

    display: block;

    padding: 4px 20px;

    font-size: 13px;

    font-weight: 500;

    color: #767676;

}

.wc-nav-sidebar .nav > .active:focus > a, .wc-nav-sidebar .nav > .active:hover > a, .wc-nav-sidebar .nav > .active > a {

    padding-left: 18px;

    font-weight: 700;

    color: #563d7c;

    background-color: transparent;

    border-left: 2px solid #563d7c;

}

 1.html

 <nav class="wc-nav-sidebar affix">

                        <ul class="nav wc-nav-sidebar">

                            <li class="active">

                                <a href="#info">订单信息</a>

                            </li>

                            <li class="">

                                <a href="#schedule">跟单进度</a>

                            </li>

                            <li class="">

                                <a href="#detail">数量明细</a>

                            </li>

                            <li class="">

                                <a href="#make">工艺说明</a>

                            </li>                        

                            <li class="">

                                <a href="#material">物料情况</a>

                            </li>

                            <li class="">

                                <a href="#produce">生产进度</a>

                            </li>

                        </ul>

     </nav>

<div>

         <div class="titile"  id="info">

                       <span>订单信息</span>

           </div>

            <div class="titile" id="schedule">

                        <span >跟单进度</span>

             </div>

              <div class="titile" id="detail">

                        <span >数量明细</span>

             </div>

               <div class="titile" id="make">

                        <span >工艺说明</span>

             </div>

               <div class="titile" id="material">

                        <span >物料情况</span>

             </div>

              <div class="titile" id="produce">

                        <span >生产进度</span>

             </div>

</div>