Question

Preview from the web inspector 嗨，我正在尝试冻结表头，以便在滚动时，标题保持在固定位置。

我目前无法访问HTML，因为我使用的是PHP Maker而且我不知道该怎么做。

请问有人可以帮助我用CSS或javascript代码冻结表格标题吗？

该表的屏幕截图包含表头和tr值谢谢。

Answer 1

在CSS中你可以使用

.sticky{
    position:fixed;
}

对于javascript代码，您可以使用;

window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

Answer 2

.ewTableHeader{
   position: fixed;
}

或

.ewTableHeader {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 999;
}

Answer 3

您可以随时尝试使用CSS / Javascript。由于您无法访问html文件，因此您必须向现有类添加样式选项或使用Javascript添加类。 css可能是这样的：

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

然后，只要用户滚动，您就需要一个脚本将粘性类添加到标题中。像这样：

// When the user scrolls the page, execute myFunction 
window.onscroll = function() {myFunction()};

// Get the header
var header = document.getElementsByClassName("ewBox");

// Get the offset position of the navbar
var sticky = header.offsetTop;

// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset >= sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

如果您不明白，请查看此example或不要犹豫，问我。

冻结表标题而无法访问HTML

3 个答案: