CSS工具欄滑動是一種流行的Web頁面樣式設計效果。這種效果可以讓頁面的工具欄隨著頁面的滾動而自動地隱藏和出現，從而提高頁面的美觀性和用戶體驗。

.toolbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
transition: transform .3s ease-out;
}
.toolbar--hidden {
transform: translateY(-100%);
}

上面是使用CSS樣式實現工具欄滑動的代碼。首先，我們需要將工具欄的位置設置為fixed，并將其放置在頁面的頂部。然后，我們定義了一個工具欄隱藏的樣式類，當工具欄需要隱藏時，我們將工具欄的位置移動到頁面的上方。

為了實現工具欄的滑動效果，我們使用了CSS的過渡效果，這使得工具欄的位置平滑地過渡到新的位置，給用戶帶來更好的體驗。

在頁面的JavaScript代碼中，我們可以使用一些簡單的邏輯來實現工具欄的滑動效果。例如，當頁面的滾動距離超過一定值時，我們就可以將工具欄的樣式設置為隱藏狀態，從而讓其滑動到頁面的上方。

document.addEventListener('scroll', () => {
const scrollPosition = window.scrollY;
if (scrollPosition > 200) {
document.querySelector('.toolbar').classList.add('toolbar--hidden');
} else {
document.querySelector('.toolbar').classList.remove('toolbar--hidden');
}
});

至此，我們就成功地實現了CSS工具欄滑動的效果。該效果不僅可以提升頁面的美觀性和用戶體驗，還可以使頁面更加優雅和易于使用。