Fixing an element on Y axis, but scrolling with page on x axis? [duplicate]

Answer 1

Here's a quick example that does not require jQuery, and uses JavaScript to float the header down as the page scrolls:

var thead = document.querySelector(".tg tr:first-child");
window.onscroll = function() {
    thead.style["-webkit-transform"] = "translateY(" + window.scrollY + "px)";
    thead.style.transform = "translateY(" + window.scrollY + "px)";
};

.header {
    width: 2000px;
}
.tg  {
    border-collapse:collapse;
    border-spacing:0;
}
.tg td {
    font-family:Arial, sans-serif;
    font-size:14px;
    padding:10px 5px;
    border-style:solid;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
}
.tg th {
    font-family:Arial, sans-serif;
    font-size:14px;
    font-weight:normal;
    padding:10px 5px;
    border-style:solid;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
}
.tg .tg-i7wz {
    font-size:20px;
}

.tg tr:first-child {
    background-color: white;
    outline: solid 1px black;
}

  

    
HEADER 1
    
HEADER 2
    
HEADER 3
    
HEADER 4
    
HEADER 5
    
HEADER 6
    
HEADER 7
    
HEADER 8
    
HEADER 9
    
HEADER 10
    
HEADER 11
    
HEADER 12
    
HEADER 13
    
HEADER 14
    
HEADER 15
    
HEADER 16
    
HEADER 17
    
HEADER 18
    
HEADER 19
    
HEADER 20
  
  

    
CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT 
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

  
  

    
CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

  
  

    
CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

  
  

    
CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

  
  

    
CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

  
  

    
CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

  
  

    
CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

  
  

    
CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

  
  

    
CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

  

JSFiddle Version: http://jsfiddle.net/0n9d92er/4/