滑動到看不見某個元件,另一個就會元件出現的效果


情境:當往下滑 navbar 消失後會出現小幫手/購物車/廣告等等

    //navbar 有一個新增文章的按鈕
    <a id="new-post-link">New Post</a>

    //當 navbar 消失後 會出現一個 + 按鈕可以新增文章
    <visible when-hidden="#new-post-link">
        <button>+</button>
    </visible>

起手式:需要一個狀態判斷元件要顯示/隱藏

    data() {
        return {
            shouldDisplay: false
        }
    },

由於要判斷元件消失,所以需要監聽事件。
做一個監聽事件 scroll,以及 callback function。

    mounted() {
        window.addEventListener('scroll', () => {
            //console.log('keep scrolling...');
            this.shouldDisplay = ! inViewport(
                document.querySelector(this.whenHidden)
            );
        }, { passive: true });
    }

由於 callback 裡面可能會用 javascript 做一些事情,這些事情可能會使得影響 scroll,所以使用 { passive: true } 來阻止預設事件。
使用現成套件來 inViewport








你可能感興趣的文章

DAY 05 : 字串

DAY 05 : 字串

Laravel view component cache

Laravel view component cache

N2_Babel 簡介及使用

N2_Babel 簡介及使用






留言討論