jQuery是一款優秀的JavaScript庫，它能夠讓我們更加方便地處理DOM、事件、動畫、Ajax等。其中，一個非常實用的功能就是通訊錄滾動字母置頂。

//獲取所有首字母元素
var charList = $('.char-list li');
//獲取所有聯系人元素
var userList = $('.user-list li');
//獲取通訊錄容器
var container = $('.container');
//計算charList中每個元素與用戶列表中對應首字母元素的位置
var charHeightArr = [];
userList.each(function () {
var initial = $(this).find('.initial').text();
var index = charList.filter('[data-char="' + initial + '"]').index();
if (index !== -1) {
if (!charHeightArr[index]) {
charHeightArr[index] = $(this).position().top - container.position().top;
}
}
});
//監聽滾動事件
container.scroll(function () {
var scrollTop = container.scrollTop();
for (var i = 0; i< charHeightArr.length; i++) {
var offsetTop = charHeightArr[i];
if (offsetTop !== undefined) {
var prevOffsetTop = charHeightArr[i - 1] !== undefined ? charHeightArr[i - 1] : 0;
if (scrollTop >= prevOffsetTop && scrollTop< offsetTop) {
charList.eq(i).addClass('active').siblings().removeClass('active');
break;
} else if (scrollTop >= offsetTop) {
charList.eq(i).addClass('active').siblings().removeClass('active');
} else if (scrollTop< prevOffsetTop) {
charList.eq(0).addClass('active').siblings().removeClass('active');
}
}
}
});

以上代碼會在通訊錄頁面加載完成后，計算出每個首字母元素對應的用戶元素的位置，然后通過監聽滾動事件，實時判斷當前滾動位置，控制各首字母元素的樣式狀態，從而實現通訊錄滾動字母置頂的效果。