Member Avatar for Liam_8

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
  • 4K Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by gentlemedia

Dani AI

Generated

Two things are likely at play here: (1) Chrome treats any ancestor with a non-none transform/perspective/filter as the containing block for a fixed descendant, so a header that is supposed to be fixed to the viewport can instead behave like it is fixed to a parent. Audit parents (including wrappers like body or layout containers) and remove transforms where possible, or move the fixed element outside those ancestors. Also double-check the class name you toggle; your later comment mentions adding class "stucky" while your CSS targets ".sticky", which would explain why Chrome did not show matched rules. See MDN for how transforms affect fixed positioning. MDN: position.

If you can switch to a table-native approach, use sticky headers on the cells instead of fixing a table row. Chrome supports sticky on th cells (but not on thead or tr). Keep ancestors from creating a new scrolling context unless intended (overflow other than visible changes where sticky anchors). Example:

table { border-collapse: separate; border-spacing: 0; }
thead th { position: sticky; top: 0; background: #fff; z-index: 1; }

This avoids scripting entirely and works across modern browsers when the scroll container is the viewport or an intended scroller. Details on the thead/tr limitation and the th workaround: CSS-Tricks: Position sticky and table headers. For current sticky behavior and scroll-ancestor notes, see Can I use: position:sticky.

Recommended Answers

All 9 Replies

Member Avatar for rproffitt
Edited by rproffitt because: added bug.
Member Avatar for pty

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

Member Avatar for Liam_8


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


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.

Member Avatar for Liam_8


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.

Member Avatar for rproffitt

@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 because: Added PS.
Member Avatar for Liam_8

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
Member Avatar for gentlemedia

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>
Member Avatar for gentlemedia

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.