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>

 

總結：遇到問題解決問題，我們會更棒