font

3月 10, 2015

讓背景固定但lightbox可以滑動的解法 (CSS+JS)

今天用出固定背景,只捲動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時則是會移除bodynoscroll


然後接著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也能正常觀看







Related Posts Plugin for WordPress, Blogger...

ShareThis