摘要：需求很簡(jiǎn)單，而且和知乎的顯示全部收起功能非常相似，但是了一下沒有找到類似的，因此決定自己實(shí)現(xiàn)一個(gè)看了知乎的網(wǎng)頁代碼。

Update 2016.12.7

已封裝為插件

原生 js 插件$ npm install foldcontent-zhihu@">=3.0.12" --save Usage

jquery 插件 $ npm install foldcontent-zhihu-jquery@">=1.0.1" --save Usage

Update 2016.11.23

此前demo 定義兩個(gè)按鈕，一個(gè)固定定位，一個(gè)絕對(duì)定位，因此滾動(dòng)至底部時(shí)會(huì)出現(xiàn)兩個(gè)按鈕同時(shí)出現(xiàn)的問題，用戶體驗(yàn)不是很好，因此更改為只有一個(gè)按鈕，判斷滾動(dòng)至底部時(shí)添加 classname 更改樣式。且精簡(jiǎn)了代碼ヾ(≧?≦*)ゝ

scroll 事件性能優(yōu)化問題。

鼠標(biāo)滾動(dòng)時(shí) scroll 事件觸發(fā)的間隔大約為 10~20 ms，相對(duì)于其他的鼠標(biāo)、鍵盤事件,它被觸發(fā)的頻率很高,間隔很近。因此如果 scroll 事件涉及大量的位置計(jì)算、元素重繪等工作，且這些工作無法在下個(gè) scroll 事件觸發(fā)前完成，就會(huì)導(dǎo)致瀏覽器掉幀

因此需要減少綁定給 scroll 中具體想要執(zhí)行的業(yè)務(wù)邏輯的執(zhí)行次數(shù)

并將對(duì)象初始化、不變的高度值等緩存在 scroll 事件外部

存在 bug : 當(dāng)以很快的速度滾動(dòng)時(shí)，有可能執(zhí)行不到 scroll 綁定的事件(ó﹏ò)，有沒得更好的優(yōu)化方案？

示例代碼及 github 均已更新 ?(ˊ?ˋ*)?

Update 2016.11.22

優(yōu)化代碼結(jié)構(gòu)，存在命名不規(guī)范、jquery 方法和原生 js 方法混用、代碼未封裝、設(shè)計(jì)冗余等問題。。。review 代碼被批了。。。

起初是要做一個(gè)公司內(nèi)部的 mongoDB 日志查詢網(wǎng)站，前端用 bootstrap，后端用 nodejs 做了一個(gè)簡(jiǎn)單的頁面，不得不說頁面還是很粗陋的，因?yàn)橐粭l日志的內(nèi)容很多，如果直接顯示的話內(nèi)容太過冗長(zhǎng)，往往滾動(dòng)幾次才能看完一條日志，而且經(jīng)常查詢的就是固定的幾個(gè) key，直接展示不利于迅速debug。

問題確定了，要實(shí)現(xiàn)的就是顯示日志時(shí)只顯示經(jīng)常查詢的幾個(gè)鍵值對(duì)，點(diǎn)擊展開時(shí)顯示全部日志，點(diǎn)擊收起時(shí)變回原狀。

需求很簡(jiǎn)單，而且和知乎的顯示全部&&收起功能非常相似，但是 Google 了一下沒有找到類似的 demo，因此決定自己實(shí)現(xiàn)一個(gè)！

看了知乎的網(wǎng)頁代碼。原理是點(diǎn)擊顯示全部時(shí)，如果這條答案超出瀏覽器視窗，則收起按鈕變成固定定位，js 計(jì)算出 right 值，bottom固定為12px；當(dāng)這條答案底部滾動(dòng)至瀏覽器視窗內(nèi)，收起按鈕變回絕對(duì)定位。ps 發(fā)現(xiàn)知乎是不是改版了，之前答案底部出現(xiàn)在瀏覽器視窗內(nèi)后這個(gè)位置是有收起按鈕的?，按鈕從固定定位變?yōu)榻^對(duì)定位并更改樣式，就像旁邊的作者保留權(quán)利這樣的風(fēng)格~（圖一直傳不上來。。暫時(shí)放棄了）

現(xiàn)在的做法是直接隱藏掉固定定位的收起按鈕。

其實(shí)我的實(shí)現(xiàn)方法和知乎的不甚相同，因?yàn)樗?js 代碼我真心……沒看懂！誰能告訴我這種情況應(yīng)該怎么調(diào)試(ノ°ο°)ノ

所以想了另一種思路，在答案右下角定義一個(gè)按鈕 A，判斷答案頂部和底部的相對(duì)位置 x 和 y ，其中 y = x + 答案的高度（js 獲取）。當(dāng)答案出現(xiàn)在瀏覽器視窗內(nèi)，即 x = $(window).height() 時(shí)，給 A 添加固定定位，動(dòng)態(tài)定義 right 值；當(dāng)答案即將滾出瀏覽器視窗，即 y = $(window).height() 時(shí)，A 變?yōu)橄鄬?duì)定位，right 值始終為 20px。當(dāng) A 的文本內(nèi)容為收起時(shí)，點(diǎn)擊 A 文本內(nèi)容變?yōu)檎归_，去掉固定定位。

此處省去連接數(shù)據(jù)庫(kù)等無關(guān)工作，僅用兩段有趣的文字作為 demo ~

首先，文字內(nèi)容分為 all-content 和 part-content 兩部分，分別為折疊前和折疊后要展示的內(nèi)容，因?yàn)檫€未搞懂知乎折疊答案后顯示哪一部分內(nèi)容的算法，所以簡(jiǎn)單粗暴地分了折疊前和折疊后的內(nèi)容。。此處有一個(gè) TODO ?

    

        

            
Sheldon 座位理論
            
In the winter that seat is close enough to the radiator to remain warm 
            and yet not so close as to cause perspiration. 
            In the summer it"s directly in the path of a cross breeze 
            created by opening windows there, and there. 
            It faces the television at an angle that is neither direct, 
            thus discouraging conversation, 
            nor so far wide to create a parallax distortion. I could go on,
            but ... I think I"ve made my point.
            
冬季的時(shí)候，這個(gè)地方離電暖器很近、最暖和，但是又不會(huì)近到讓你感覺熱、流汗；
                夏天的時(shí)候，這里又可以吹由那兩扇窗戶吹進(jìn)來的徐徐微風(fēng)；
                坐這的角度可以讓我同時(shí)看電視又同時(shí)和他人聊天而不受影響，
                恰好不會(huì)太遠(yuǎn)也不會(huì)產(chǎn)生視覺上的錯(cuò)覺。
            
That is my spot. In an ever-changing world it is a simple point of consistency.
                If my life were expressed as a function in a four-dimensional Cartesian coordinate system,
                that spot, at the moment I first sat on it, would be 0000.
            
那是我的專座。在這個(gè)不斷變化的世界里，這是不變的一點(diǎn)。
                假設(shè)我的生命用一個(gè)建立在四維直角坐標(biāo)系里的方程來表示的話，
                這個(gè)座位從我坐上那一刻開始就成為了(0,0,0,0)。
        

        

            In the winter that seat is close enough to the radiator to remain warm 
            and yet not so close as to cause perspiration. 
            In the summer
             ...
        

        
展開
    

var doc = $(document);
var win = $(window);
// 多次使用, 緩存起來
doc.on("click", ".unfold", function () {
    var unfold = $(this);
    if (unfold.text() !== "收起") {
        unfold.text("收起").siblings(".part-content").hide().siblings(".all-content").show();
        var panel = unfold.parent();
        var panelScroll = panel.offset().top + panel.height();
        var scrollHeight = doc.scrollTop() + win.height();
        var right = win.width() / 2 - 350 + 20 > 20 ? win.width() / 2 - 350 + 20 : 20;
        // 點(diǎn)擊展開按鈕時(shí)即判斷是否出現(xiàn)收起按鈕
        if (scrollHeight - panelScroll < 50) {
            unfold.addClass("fold-fix").css("right", right);
        }
        // 綁定在 scroll 事件上
        var cb = {
            onscroll: function() {
                var panelScroll = panel.offset().top + panel.height();
                var scrollHeight = doc.scrollTop() + win.height();
                var right = win.width() / 2 - 350 + 20 > 0 ? win.width() / 2 - 350 + 20 : 20;
                if (scrollHeight - panelScroll < 50 &&
                    panel.offset().top - scrollHeight < -90 && unfold.text() !== "展開") {
                    unfold.addClass("fold-fix").css("right", right);
                } else {
                    changeStyle(unfold);
                }
                win.off("scroll", cb.onscroll);
                setTimeout(function() {
                    win.on("scroll", cb.onscroll);
                }, 50);
            }
        };
        win.on("scroll", cb.onscroll);
    } else {
        var fold = $(this);
        changeStyle(fold);
        fold.text("展開").siblings(".part-content").show()
            .siblings(".all-content").hide();
    }
});

function changeStyle(i) {
    i.removeClass("fold-fix").css("right", "20px");
}

此處涉及一個(gè)知識(shí)點(diǎn)：網(wǎng)頁元素的絕對(duì)位置 && 相對(duì)位置

網(wǎng)頁元素的絕對(duì)位置，指該元素的左上角相對(duì)于整張網(wǎng)頁左上角的坐標(biāo)。jquery 中 offset() 方法返回元素相對(duì)于文檔的偏移。該方法返回的對(duì)象包含兩個(gè)整型屬性：top 和 left。x.offset().top 即為 x 元素的絕對(duì)高度；

網(wǎng)頁元素的相對(duì)位置，指該元素左上角相對(duì)于瀏覽器窗口左上角的坐標(biāo)。絕對(duì)位置減去頁面的滾動(dòng)條滾動(dòng)的距離就是相對(duì)位置。x.offset().top － $(document).scrollTop() 即為 x 元素的相對(duì)高度。

本例需要瀏覽器視窗剛剛滾動(dòng)至答案a的絕對(duì)定位按鈕出現(xiàn)的效果，因此此節(jié)點(diǎn)為答案底部的相對(duì)高度減去瀏覽器視窗高度正好等于負(fù)的按鈕 A 的高度。即 a.offset().top + a.height() - $(document).scrollTop() - $(window).height() = - 按鈕高度

阮一峰老師的用Javascript獲取頁面元素的位置這篇文章講解得十分清晰，如果要深入了解這個(gè)知識(shí)點(diǎn)建議看一下這篇文章，說不定就有茅塞頓開的感覺哦 ?(ˊ?ˋ*)?

如何動(dòng)態(tài)設(shè)置固定定位的折疊按鈕 的 right 值呢？

答案的固定寬度是 700px，因此瀏覽器視窗寬度減去 700px 再除以 2 便始終是答案的 right 值，因?yàn)榘粹o為絕對(duì)定位時(shí) right: 20px; 因此 right: $(window).width()/2 - 350 + 20 就保證了固定定位和絕對(duì)定位時(shí)按鈕都在一條垂直線上，過渡銜接很自然。

當(dāng)瀏覽器窗口不斷縮小時(shí)，上面計(jì)算出的固定定位時(shí)按鈕的 right 值可能為負(fù)，這顯然不符合需求，因此要設(shè)置當(dāng)計(jì)算出的 right 值為負(fù)時(shí)設(shè)置 right 值為 20px。

源代碼已上傳至 my github (???) ?