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

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 定義兩個按鈕，一個固定定位，一個絕對定位，因此滾動至底部時會出現兩個按鈕同時出現的問題，用戶體驗不是很好，因此更改為只有一個按鈕，判斷滾動至底部時添加 classname 更改樣式。且精簡了代碼ヾ(≧?≦*)ゝ

scroll 事件性能優化問題。

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

因此需要減少綁定給 scroll 中具體想要執行的業務邏輯的執行次數

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

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

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

Update 2016.11.22

優化代碼結構，存在命名不規范、jquery 方法和原生 js 方法混用、代碼未封裝、設計冗余等問題。。。review 代碼被批了。。。

起初是要做一個公司內部的 mongoDB 日志查詢網站，前端用 bootstrap，后端用 nodejs 做了一個簡單的頁面，不得不說頁面還是很粗陋的，因為一條日志的內容很多，如果直接顯示的話內容太過冗長，往往滾動幾次才能看完一條日志，而且經常查詢的就是固定的幾個 key，直接展示不利于迅速debug。

問題確定了，要實現的就是顯示日志時只顯示經常查詢的幾個鍵值對，點擊展開時顯示全部日志，點擊收起時變回原狀。

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

看了知乎的網頁代碼。原理是點擊顯示全部時，如果這條答案超出瀏覽器視窗，則收起按鈕變成固定定位，js 計算出 right 值，bottom固定為12px；當這條答案底部滾動至瀏覽器視窗內，收起按鈕變回絕對定位。ps 發現知乎是不是改版了，之前答案底部出現在瀏覽器視窗內后這個位置是有收起按鈕的?，按鈕從固定定位變為絕對定位并更改樣式，就像旁邊的作者保留權利這樣的風格~（圖一直傳不上來。。暫時放棄了）

現在的做法是直接隱藏掉固定定位的收起按鈕。

其實我的實現方法和知乎的不甚相同，因為他的 js 代碼我真心……沒看懂！誰能告訴我這種情況應該怎么調試(ノ°ο°)ノ

所以想了另一種思路，在答案右下角定義一個按鈕 A，判斷答案頂部和底部的相對位置 x 和 y ，其中 y = x + 答案的高度（js 獲取）。當答案出現在瀏覽器視窗內，即 x = $(window).height() 時，給 A 添加固定定位，動態定義 right 值；當答案即將滾出瀏覽器視窗，即 y = $(window).height() 時，A 變為相對定位，right 值始終為 20px。當 A 的文本內容為收起時，點擊 A 文本內容變為展開，去掉固定定位。

此處省去連接數據庫等無關工作，僅用兩段有趣的文字作為 demo ~

首先，文字內容分為 all-content 和 part-content 兩部分，分別為折疊前和折疊后要展示的內容，因為還未搞懂知乎折疊答案后顯示哪一部分內容的算法，所以簡單粗暴地分了折疊前和折疊后的內容。。此處有一個 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.
            
冬季的時候，這個地方離電暖器很近、最暖和，但是又不會近到讓你感覺熱、流汗；
                夏天的時候，這里又可以吹由那兩扇窗戶吹進來的徐徐微風；
                坐這的角度可以讓我同時看電視又同時和他人聊天而不受影響，
                恰好不會太遠也不會產生視覺上的錯覺。
            
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.
            
那是我的專座。在這個不斷變化的世界里，這是不變的一點。
                假設我的生命用一個建立在四維直角坐標系里的方程來表示的話，
                這個座位從我坐上那一刻開始就成為了(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;
        // 點擊展開按鈕時即判斷是否出現收起按鈕
        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");
}

此處涉及一個知識點：網頁元素的絕對位置 && 相對位置

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

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

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

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

如何動態設置固定定位的折疊按鈕 的 right 值呢？

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

當瀏覽器窗口不斷縮小時，上面計算出的固定定位時按鈕的 right 值可能為負，這顯然不符合需求，因此要設置當計算出的 right 值為負時設置 right 值為 20px。

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