CSS實現通訊錄置頂功能非常簡單，我們只需要使用position: fixed;屬性即可。首先，讓通訊錄的父元素設置為position: relative;，以便我們使用相對于其進行定位。然后，我們需要使用position: fixed;和top: 0;屬性來讓通訊錄保持在頁面頂部。

.contact-wrapper {
position: relative;
}
.contact {
position: fixed;
top: 0;
width: 100%;
}

此時，通訊錄已經可以置頂了。但是，在通訊錄下方的內容會被頂上去，這對于用戶體驗并不友好。我們需要讓通訊錄下方的內容下移與通訊錄高度同等的距離，以免內容被頂上去。

.contact {
position: fixed;
top: 0;
width: 100%;
z-index: 1;  /* 讓通訊錄處于最上層 */
}
.content {
margin-top: 50px;  /* 需要下移50px，具體值需根據通訊錄高度調整 */
}

這樣，我們就實現了一個簡單的通訊錄置頂功能。如果你需要更加具有交互性的效果，例如滾動時通訊錄隱藏，滾回頂部時再次顯示，或者滾動到某個位置時通訊錄自動跟隨滾動等，可以使用JavaScript來實現。