0

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>

Edited by Liam_8

4
Contributors
9
Replies
59
Views
5 Months
Discussion Span
Last Post by gentlemedia
1

It will be much easier for people to test and contribute if you create a JS fiddle demonstrating exactly what the problem is.

0

@rproffitt
well I did try all the suggestions I found from google but nothing works.

@pty
sorry, I missed out on some stuffs. Basically, it doesn't work at all.
Like the header that is suppose to scroll down along with the user just stands there as if there were no codes.
This code works perfectly on Opera and Firefox so it's not the code. It doesn't work on Chrome only and I need this to work in Chrome.

0

@rproffitt
You know man. Searching for days means I've come accross that. position: sticky once again didn't help me. My header is still deadlocked above the table rows. It worked well on Opera though.

0

@L So you are telling me the example at developers.google.com example now fails?

Added with edit: A JS Fiddle would be best.

Edited by rproffitt: Added PS.

0

Sorry for late reply. I had a lead and tried to dig a little further but that lead is gone and Chrome just won't budge. I say the browser is deffective. I'm using it on Opera and Chrome. Chrome is the important one.

https://jsfiddle.net/Ljp2725a/3/

One thing I noticed though is that when I go to inspect element, then observe the th header as I scroll down, with Opera, it successfully adds the class "stucky" and it adds stucky to its list of styles as well. With Chrome, it successfully adds "stucky" but the stucky class won't appear in its list of style.

Any idea?

Edited by Liam_8

1

I was curious what your code does, so I've created a demoi of it in codepen and without the transform property the table row is fixed at the top in the latest Chrome. Ok, it looks awful, but it's fixed, so what's the problem?

https://codepen.io/gentlemedia/pen/KZqNoL

I also would like to mention that there is an explicit element for table headers which is <thead>

<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
</table>
2

I was a bit late with my post and see that you created a jsfiddle with your code. Only your fiddle misses the jQuery library so your function doesn't do anything.

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.