How to keep the header static, always on top while scrolling?

前端未结

关注

 8  821

被撕碎了的回忆 2020-12-02 08:15

How would I go about keeping my header from scrolling with the rest of the page? I thought about utilizing frame-sets and iframes, jus

8条回答

长情又很酷 (楼主)

2020-12-02 09:00

I personally needed a table with both the left and top headers visible at all times. Inspired by several articles, I think I have a good solution that you may find helpful. This version does not have the wrapping problem that other soltions have with floating divs or flexible/auto sizing of columns and rows.




    
    
    
    


    
        
            
            
                
                    
                        
                             
                        
                        
                            TOP HEADER
                        
                        
                            TOP HEADER
                        
                        
                            TOP HEADER
                        
                        
                            TOP HEADER
                        
                        
                            TOP HEADER
                        
                        
                            TOP HEADER
                        
                        
                            TOP HEADER
                        
                        
                            TOP HEADER
                        
                        
                            TOP HEADER
                        
                        
                            TOP HEADER
                        
                        
                            TOP HEADER
                        
                        
                            TOP HEADER
                        
                        
                            TOP HEADER
                        
                        
                            TOP HEADER
                        
                        
                            TOP HEADER
                        
                        
                            TOP HEADER
                        
                        
                            TOP HEADER
                        
                        
                            TOP HEADER
                        
                        
                            TOP HEADER
                        
                        
                            TOP HEADER
                        
                        
                            TOP HEADER
                        
                        
                            TOP HEADER
                        
                        
                            TOP HEADER
                        
                        
                            TOP HEADER
                        
                    
                
                
                    
                        
                            MY HEADER COLUMN:
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                    
                    
                        
                            MY HEADER COLUMN:
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.
                        
                        
                            The quick brown fox jumps over the lazy dog.

0 讨论(0)

查看其它8个回答

	TOP HEADER	TOP HEADER	TOP HEADER	TOP HEADER	TOP HEADER	TOP HEADER	TOP HEADER	TOP HEADER	TOP HEADER	TOP HEADER	TOP HEADER	TOP HEADER	TOP HEADER	TOP HEADER	TOP HEADER	TOP HEADER	TOP HEADER	TOP HEADER	TOP HEADER	TOP HEADER	TOP HEADER	TOP HEADER	TOP HEADER	TOP HEADER
MY HEADER COLUMN:	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.
MY HEADER COLUMN:	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.