冻结表标题而无法访问HTML

时间:2018-04-02 09:15:19

标签: javascript css

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

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

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

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

3 个答案:

答案 0 :(得分:0)

在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");
  }
}

答案 1 :(得分:0)

.ewTableHeader{
   position: fixed;
}

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

答案 2 :(得分:0)

您可以随时尝试使用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或不要犹豫,问我。