Preview from the web inspector 嗨,我正在尝试冻结表头,以便在滚动时,标题保持在固定位置。
我目前无法访问HTML,因为我使用的是PHP Maker而且我不知道该怎么做。
请问有人可以帮助我用CSS或javascript代码冻结表格标题吗?
该表的屏幕截图包含表头和tr值 谢谢。
答案 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或不要犹豫,问我。