jQuery是一種常用的JavaScript庫，它可以讓我們更輕松、更高效地編寫JavaScript代碼。選項卡是web開發中常用的一種頁面展示方式，它可以讓我們在有限的頁面空間內提供更多的信息展示。而選項卡吸頂是一種優化方式，可以使頁面滾動時選項卡保持在頁面頂部，讓用戶更方便地切換選項卡。

// HTML結構
<div class="tab-menu">
<div class="tab-item active">選項卡1</div>
<div class="tab-item">選項卡2</div>
<div class="tab-item">選項卡3</div>
</div>
<div class="tab-content">
<div class="tab-panel active">選項卡1的內容</div>
<div class="tab-panel">選項卡2的內容</div>
<div class="tab-panel">選項卡3的內容</div>
</div>
// CSS樣式
.tab-menu {
position: sticky;
top: 0;
background-color: #fff; 
z-index: 2; 
}
.tab-panel {
display: none;
}
.active {
display: block;
}
// JavaScript代碼
$(function() {
// 點擊選項卡切換內容
$(".tab-item").on("click", function() {
$(this).addClass("active").siblings().removeClass("active");
var index = $(this).index();
$(".tab-panel").eq(index).addClass("active").siblings().removeClass("active");
});
// 監聽頁面滾動事件，控制選項卡吸頂
$(window).scroll(function() {
var top = $(".tab-menu").offset().top;
if ($(window).scrollTop() >= top) {
$(".tab-menu").addClass("fixed");
} else {
$(".tab-menu").removeClass("fixed");
}
});
});

通過以上代碼，我們可以輕松實現選項卡吸頂的效果，同時可以讓網頁變得更加優美、實用！