在網頁設計中，有時候我們希望頁面底部的版權信息等內容在頁面滾動到一定位置時不再顯示，可以通過CSS實現。下面我們就來介紹一下如何使用CSS滾動隱藏頁腳。

.footer {
position: fixed;
bottom: 0;
width: 100%;
background-color: #ccc;
padding: 10px 0;
transition: bottom 0.3s ease;
}
.footer.hidden {
bottom: -50px;
}

我們先給頁腳添加一個 class 名稱為 .footer，然后設置其 position 為 fixed，并將其置于頁面底部，width 設置為 100%，background-color 設置為灰色，padding 設置為 10px 0。接著，我們為 .footer 添加一個過渡（transition），讓其在改變 bottom 屬性時有一個平滑的過渡效果。最后，我們再定義一個 .hidden 的 class，用于在滾動到一定位置時觸發隱藏效果。

window.addEventListener('scroll', function() {
var footer = document.querySelector('.footer');
var threshold = document.body.offsetHeight - window.innerHeight - 100;
if (window.pageYOffset >threshold) {
footer.classList.add('hidden');
} else {
footer.classList.remove('hidden');
}
});

我們使用 JavaScript 監聽滾動事件，當滾動到頁面底部減去一定的距離時，就添加 .hidden 類名，從而觸發隱藏效果。而當頁面回到頂部時，我們就將 .hidden 類名移除，使頁腳重新顯示。

通過這種方式，我們可以輕松地實現在頁面滾動到一定位置后自動隱藏頁腳的效果。如果你在項目中也需要使用類似的滾動隱藏效果，可以參考上述代碼，在實際應用場景中進行適當的調整，實現自己想要的效果。