c2024
/
projekt
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dodanie przesuwania nakglowak tabelki

This commit is contained in:
Tomasz 2024-10-18 12:15:36 +02:00
parent e2eac05ab5
commit 52fb67d125
3 changed files with 33 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/style.css
View File

@ -143,3 +143,10 @@ input[type="checkbox"] {
transform: scale(1.2); transform: scale(1.2);
cursor: pointer; cursor: pointer;
} }
.sticky {
position: sticky;
top: 0;
background-color: white; /* lub inny kolor, aby tło było widoczne */
z-index: 1000; /* zapewnia, że będzie na wierzchu */
border-bottom: 1px solid #ccc; /* opcjonalnie, aby oddzielić od treści */
}

14
index.html
View File

@ -4,6 +4,20 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Ocena Zachowania</title> <title>Ocena Zachowania</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<style>
table {
width: 100%;
border-collapse: collapse;
}
th {
position: sticky;
top: 0;
background-color: beige; /* Kolor tła nagłówka */
z-index: 10; /* Zapewnia, że nagłówek będzie nad innymi elementami */
border: 1px solid #ddd; /* Opcjonalnie: Dodanie obramowania */
padding: 8px;
}
</style>
</head> </head>
<body> <body>

11
js/script.js
View File

@ -358,3 +358,14 @@ function generateTable(category) {
tbody.appendChild(row); tbody.appendChild(row);
}); });
} }
//window.onscroll = function() {
// const stickyElements = document.querySelectorAll('.sticky');
//stickyElements.forEach(element => {
// if (window.pageYOffset > element.offsetTop) {
// element.classList.add('active');
// } else {
// element.classList.remove('active');
//}
//});
//};