今天用出固定背景，只捲動lightbox的方式超爽Der
所以上來寫寫，不過前提是燈箱架構要先寫好
像是這個網頁這樣

上面貼的這個範例的燈箱
是滾動燈箱時整個背景也會跟著滾動
如果像這樣的燈箱需要固定背景只滾動燈箱的div的話，
只要設定以下的東西





第一步：點開lightbox時加入class，鎖定整個網頁畫面

這邊需要有JS的設定，點開lightbox時，
JS要在body加一個class，欸...就取名noscroll吧。（可以隨便取啦。）
記得JS是要設定這樣的內容
（以下JS語法淺灰表示，僅參考，本篇不詳細解說JS怎麼寫喔喔）：

       open: function (assignPosition) {
            $box
            .addClass('open')
            ;
$('body').addClass('noscroll');

            publicMethod.position(assignPosition);
            publicMethod.playVideo();

        },

        close: function () {
            console.log('close ligthbox');
            $box
                .removeClass('open');

            publicMethod.stopVideo();

$('body').removeClass('noscroll');

        }

$('body').removeClass('noscroll');
    return publicMethod;
反正就是要確保點開lightbox時body會加入noscroll這個屬性，
且關掉lightbox時則是會移除body的noscroll。


然後接著CSS的部分，noscroll的屬性則是要設定這樣：

position: fixed;
width: 100%;

這個設定完，整個網頁body都fix起來了，燈箱也不例外，
先別擔心，接著就要設定第二步驟。



第二步：把燈箱的整個div解除fix鎖定

因為第一步驟的關係整個畫面都被fix住了，
不過沒關係，我們就接著把整個lightbox的屬性設定成

position: absolute;
width: 100%;
height: 100%;
top: 0;
overflow-y: scroll;

用意在於改變position原本fix的設定，
並加上overflow-y: scroll讓燈箱的整個div可以滾動，




第三步：燈箱的黑色遮罩也要跟著調整

第二步驟之後，要接著注意跟著改變燈箱黑色遮罩的屬性
遮罩的class我通常會取mask比較好辨別，這時把mask屬性加入

overflow-y: scroll;

就大功告成了！


※
遮罩這裡如果沒有改的話，CSS可能還是會有一些問題
如果有確實做到第三步，可以確保RWD也能正常觀看