“冻结窗格”样式效果使用CSS / HTML [英] 'Freeze panes'-style effect using CSS/HTML

问题描述

是否可以/容易创建一个网页，其行为类似于已应用冻结窗格的Microsoft Excel电子表格？通过这个，我的意思是一个标题和侧边栏应保持固定在其位置，但向下/向下滚动页面时向右滚动。

Is it possible/easy to create a web page which would act like a Microsoft Excel spreadsheet that has 'Freeze panes' applied to it? By this, I mean that a header and sidebar should remain fixed in their places but scroll down/right when the page is scrolled.

我需要一些像此，但我希望将其应用于整个网页，而不是表格。

I need something like this, except that I want it to be applied to a whole page and not a table.

推荐答案

这可以切换到 position：fixed 。

例如，一个具有类

#fixed-div {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background-color: #000;
}

将在浏览器视口的最上100像素。

will remain fixed in the upmost 100px of your browser viewport when you're scrolling.

这个小提琴演示了垂直和水平方向的效果。
http://jsfiddle.net/ukzYf/1/

This fiddle demonstrates the effect in both vertical and horizontal direction. http://jsfiddle.net/ukzYf/1/

希望这有帮助。

这篇关于“冻结窗格”样式效果使用CSS / HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！