先上效果圖：劃過(guò)之后粘在頁(yè)面之上，之后又取下來(lái)的感覺(jué)

Stick Up.gif

核心思路：

• 1.你看到的粘在上面的nav的確是本體，不過(guò)已經(jīng)被position：fixed，所以才有這種固定的效果；
• 2.當(dāng)本體fixed之后，因?yàn)槊撾x文檔流，下面的元素勢(shì)必會(huì)上來(lái)，這里會(huì)事先clone一個(gè)nav，insertBefore到本體的位置，然后讓他opacity：0，再hide；
• 3.當(dāng)滑動(dòng)到某個(gè)nav的位置的時(shí)候，本體display：fixed，clone體show()出來(lái)，撐住場(chǎng)面，不讓頁(yè)面散掉，當(dāng)滑動(dòng)小于某個(gè)距離的時(shí)候，clone體繼續(xù)hide(),本地不再fixed，就是這么一個(gè)思路；

下面看看具體代碼的實(shí)現(xiàn)過(guò)程吧：場(chǎng)景設(shè)定是 nav 來(lái)Stick up

Step0:我用的這個(gè)結(jié)構(gòu)

    <div id="content">
        <div id="content-1" class="content-item">
            <div class="nav">nav1</div>
            <div class="aside">aside1</div>
            <div class="main">main1</div>
        </div>
        <div id="content-2" class="content-item">
            <div class="nav">nav2</div>
            <div class="aside">aside2</div>
            <div class="main">main2</div>
        </div>
        <div id="content-3" class="content-item">
            <div class="nav">nav3</div>
            <div class="aside">aside3</div>
            <div class="main">main3</div>
        </div>
    </div>

Step1:一些后面需要用到的變量

var $nav = $('.nav'),
        navH = $nav.height(),
        navW = $nav.width(),
        offsetLeft = $nav.offset().left,
        offsetTop = $nav.offset().top;
    var $cloneNav = $nav.clone().css('opacity',0).insertBefore($nav).hide();
    //這里的 $cloneNav 是這樣一路下來(lái)的 

Step2:如何判斷是否該元素是否到了該position：fixed？

$(window).on('scroll',function(){
        var scrollTop = $(this).scrollTop();
        if(scrollTop>= offsetTop){
            if(!isFixed()){
                setFixed();
            }
        }else{
            if(isFixed()){
                unsetFixed();
            }
        }
    });

這里先把思路理出來(lái)，當(dāng)頁(yè)面滾動(dòng)的時(shí)候，“頁(yè)面滾動(dòng)的距離”是否大于“自己在頁(yè)面的偏移的距離”，
大于就證明到了，就開始判斷是否已經(jīng)fixed，沒(méi)有就setFixed，假如小于這個(gè)距離，就判斷是否fixed，如果fixed就解除fixed；注意這里并沒(méi)有把瀏覽器高度拉進(jìn)來(lái)，是因?yàn)槲沂亲屗潭ㄔ跒g覽器上方；這一點(diǎn)和以后要說(shuō)的懶加載又有點(diǎn)不一樣，先挖個(gè)坑在這里；

Step3:如何setFixed呢？又是如何unsetFixed呢？

    function setFixed(){
        $nav.attr('position-fixed',true)
                .css({
                    position:'fixed',
                    top:0,
                    left:offsetLeft,
                    'z-index':7,
                    width:navW,
                    height:navH,
                    margin:0
                });
        $cloneNav.show();
    }
    function unsetFixed(){
        $nav.removeAttr('position-fixed').removeAttr('style');
        $cloneNav.hide();
    }

用到了jQuery的attr()，設(shè)置一個(gè)自定義標(biāo)簽，讓經(jīng)過(guò)set之后的元素有一個(gè)標(biāo)記，然后用.css()來(lái)操縱本體，最后讓clone體show出來(lái)，撐住場(chǎng)面，讓頁(yè)面不至于散架；
后面的解除fixed，就是把自己的自定義標(biāo)簽去除掉，并且把style（這里通過(guò)js操縱的樣式都加在行內(nèi)去了，所以用style來(lái)干涉），最后讓clone體功成身退的hide掉

Step4:那么最終的問(wèn)題，工具全部齊活了，最后的判斷條件怎么寫呢？

    function isFixed(){
        return !!$nav.attr('position-fixed');
    }

這里用的就是我設(shè)置的自定義標(biāo)簽，省去了一些功夫，直接判斷是否存在這個(gè)標(biāo)簽，用了??！兩次轉(zhuǎn)換，因?yàn)橐呀?jīng)fixed的話，返回的就是true，但是假如根本沒(méi)有fixed，這個(gè)自定義標(biāo)簽就不會(huì)存在，就會(huì)使undifined，所以兩次轉(zhuǎn)換之后變成false，達(dá)到效果；

具體細(xì)節(jié)和可以上github查看