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

情境：當往下滑 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