div导航滚动到固定位置，且锚点定位不精准解决办法

一、首页，设置导航效果：

$(function () {
            //获取要定位元素距离浏览器顶部的距离
            let p= $('#zsjz-nav').offset().top;
            $(window).bind("scroll",function () {
                //获取滚动条的滑动距离
                let scroH = $(this).scrollTop();
                //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
                if(scroH>=p){
                    $("#zsjz-nav").addClass("scroll-up")
                    $('.nav-box').show();
                }else{
                    $("#zsjz-nav").removeClass("scroll-up")
                    $('.nav-box').hide();
                }
            });
        })

因为导航div从display:block变成display:fixed，脱离了文档流，造成后面锚点定位不准确，这里发一下这个bug的解决办法

<div class="container" id="zsjz-nav">
        <ul class="nav-menu">
            <li><a href="#index">招生简章</a></li>
            <li><a href="#school">学校简介</a></li>
            <li><a href="#environment">优美环境</a></li>
            <li><a href="#culture">丰富文化</a></li>
        </ul>
    </div>
    <div class="nav-box">只为了弥补导航脱离文档流后的位置</div>
<style>

.nav-box{width: 100%;height: 140px;display: none;}

</style>

二、锚点定位的内容被导航遮住

锚点位置跳转到的位置div：

.extra{border-top: solid 100px #fff;margin-top: -100px;}

 这实际上是一种掩眼法，对齐的参考点还是在元素的顶端，只是我把元素的设置了特定的border-top(padding-top也可以，margin-top不可以),锚点就可以好像真的一样偏移到目标标题文字，但是这样会使下来元素之间产生一段距离，那么我们只要设置其margin-top为负值，而且刚好为padding-top的值即可。

具体内容可以参考：http://www.webjx.com/css/divcss-17544.html#anchor2

<ul class="nav-menu">
    <li><a href="#index">招生简章</a></li>
    <li><a href="#school">学校简介</a></li>
</ul>

<div class="row extra" id="school" >
    <div class="col-md-12">
        <div class="h3 title"><span class="glyphicon glyphicon-home icon"></span>学校介绍</div>
    </div>
</div>

 

总结：遇到问题解决问题，我们会更棒