如何实现Kendo Grid表头固定在页面加载时的初始位置？

阿华AIGC实验室

2026-5-26

我完全懂你的需求——Telerik官方文档里的固定表头是钉在浏览器窗口顶部，但你要的是让表头老老实实待在页面加载时它所在的那个位置，不管页面怎么滚动都不动，对吧？我之前帮朋友解决过类似的问题，给你分享两个靠谱的实现思路：

方法一：基于固定定位的精准固定

这个方法的核心是先记录表头的初始位置，然后在页面滚动时把表头固定在那个坐标上，同时调整表格内容的位置避免被遮挡：

先写基础样式，确保表头不透明，避免滚动时内容透出来：

.k-grid-header {
  background-color: #fff; /* 替换成你实际需要的背景色即可 */
  transition: all 0.2s ease; /* 可选，添加过渡动画让切换更顺滑 */
}

用JavaScript实现位置记录和滚动监听：

$(document).ready(function() {
  // 获取Grid表头元素
  const $gridHeader = $('.k-grid-header');
  // 记录表头加载时的初始位置、高度和宽度
  const initialPos = $gridHeader.offset();
  const headerHeight = $gridHeader.outerHeight();
  const initialWidth = $gridHeader.width();

  // 监听页面滚动事件
  $(window).on('scroll', function() {
    // 把表头固定在初始位置
    $gridHeader.css({
      position: 'fixed',
      top: initialPos.top,
      left: initialPos.left,
      zIndex: 999, // 确保表头显示在其他元素上方
      width: initialWidth
    });

    // 给表格内容区域添加上边距，避免被固定的表头挡住
    $('.k-grid-content').css('margin-top', headerHeight);
  });

  // 监听窗口 resize 事件，重新计算表头宽度防止错位
  $(window).on('resize', function() {
    $gridHeader.css('width', $('.k-grid').width());
  });
});

方法二：结合粘性定位的局部固定

如果你希望表头只有当页面滚动到它的位置时才固定（而非一开始就固定），但固定后仍保持在初始的页面位置（不是窗口顶部），可以用CSS原生的position: sticky来实现，步骤更简洁：

CSS样式配置：

/* 给Grid的外层容器设置相对定位，作为粘性定位的参考 */
.grid-wrapper {
  position: relative;
}

/* 表头设置粘性定位，top值为相对于父容器的初始偏移（这里设为0即可固定在父容器顶部） */
.k-grid-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: #fff;
}

JS初始化容器高度（可选，若Grid内容过长需要内部滚动）：

$("#your-grid-id").kendoGrid({
  dataBound: function() {
    // 给Grid外层容器设置固定高度，让内容可以在容器内滚动
    $('.grid-wrapper').css({
      height: '700px',
      overflowY: 'auto'
    });
  }
});

这个方法利用CSS原生特性，兼容性好且代码量少，适合不需要复杂逻辑的场景。