Hello guys. I've just gotten back to programming. It's been 5 years since I last programmed. Yes, that long. But I am not very far behind it seems since I can still catch up on my functions.
Right now, I'm trying to create a moving header from a table that follows the user as he/she scrolls down. I'm using css/javascript to do that.
The great thing is, this works on Opera and Firefox. However, it does not work on Chrome. I want this to work on all 3 browsers.
I've searched for days in google and it can be solved by adding -webkit-transform: translateZ(0); to your class but it does not work for me. I've read about some guy saying a lot of things can mess up position: fixed but I don't know what they are. A nice help would be very much appreciated. Here are my codes:
.sticky
{
-webkit-transform: translateZ(0);
position: fixed;
top: 0;
width: 100%;
}
$(document).ready(function () {
var head = document.getElementById("itemheader");
var stick = head.offsetTop;
window.onscroll = function() { movehead(head, stick);};
});
function movehead(head, stick)
{
if(window.pageYOffset >= stick)
{
head.classList.add("sticky");
}
else
{
head.classList.remove("sticky");
}
}
<html>
<table border="1">
<tr class="head" id="itemheader">
<th></th>
<th><p>Item Name</p></th> <th><p>Cost</p></th>
</tr>
<tr>
<td>test</td>
<td>blahblah</td>
<td>test</td>
</tr>
<!-- just assume there are a lot of tr and td here -->
</table>
</html>
