CSS 懸浮工具欄是網頁設計中經常使用的一個元素。當用戶滾動頁面時，它可以固定在屏幕的一側，以便進行導航或其他操作。但是有時候，懸浮工具欄也需要在用戶不需要它的時候自動隱藏，以避免對用戶視線的干擾。

有許多方法可以實現 CSS 懸浮工具欄隱藏。其中一種方法是使用 CSS 屬性“transform: translate()”。通過將懸浮工具欄向上或向下移動相應的距離，可以隱藏或顯示它。

.fixed-toolbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,.2);
transition: transform .2s ease-in-out;
}
.fixed-toolbar.hide {
transform: translateY(-50px);
}

上面的代碼展示了一個典型的懸浮工具欄的 CSS 樣式。當用戶需要隱藏該工具欄時，可以添加一個名為“hide”的 CSS 類，用于將該工具欄向上移動 50 像素。

window.addEventListener('scroll', function() {
if (document.documentElement.scrollTop || document.body.scrollTop >100) {
document.querySelector('.fixed-toolbar').classList.add('hide');
} else {
document.querySelector('.fixed-toolbar').classList.remove('hide');
}
});

上面的 JavaScript 代碼則監聽了頁面滾動事件。當頁面滾動超過 100 像素時，將為懸浮工具欄添加“hide”類，以隱藏該工具欄。當用戶向上滾動頁面時，將該類從懸浮工具欄上移除，以重新顯示該工具欄。

通過上述代碼實現的 CSS 懸浮工具欄隱藏效果，在頁面設計中非常常見。它既可以提供導航或操作功能，也不會對用戶造成視覺干擾，既實用又美觀。