How to set position fix horizontal and sticky vertical
Question
I'm having actually a problem. I'm developing a website for my university.
There you have on top a typical header. Below this header is a div with some filter possibility to filter a table, which is positioned below.
The table is typically very large. So you have to scroll sometimes in both directions (horizontal and vertical). If you want to scroll, then should the header stay on its position. Between Header and filter div is a headline located. This headline should hide.
The filters should move a little bit to the top and then stay below the Header. For this, I used position: sticky . This works very well.
But if I scroll to the right, the filters move out of the viewport.
So is there a possibility, that the filter div is vertically sticky and stays horizontally in his fixed position?
Here is an example of my problem:
body { height: 100%; display: block; } .header { background-color: red; position: fixed; left: 0; top: 0; width: 100%; z-index: 1; } .body { padding-top: 20px; width: 100%; height: 100%; } .filter { display: flex; flex-direction: row; align-items: center; background-color: blue; width: 100%; position: sticky; position: -webkit-sticky; top: 20px; z-index: 1; } th { width: 200px; background-color: purple; position: sticky; top: 40px; } td { width: 200px; background-color: lightblue; } table { position: relative; border-collapse: collapse; width: 1500px; }
<html> <body> <div class="header"> Header </div> <div class="body"> <h2> Headline </h2> <div class="filter"> Filters </div> <span>some text</span> <div class="table"> <table> <thead> <tr> <th>a</th> <th>a</th> <th>a</th> <th>a</th> <th>a</th> <th>a</th> <th>a</th> <th>a</th> <th>a</th> <th>a</th> <th>a</th> <th>a</th> </tr> </thead> <tbody> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> </tbody> </table> </div> </div> </body> </html>
So I don't want to lose the vertical sticky behavior when I scroll horizontal. I want to use sticky vertical and fixed horizontal at the same time.
4 answers
solution1
1 2019-12-11 11:50:01
You Can Fix this with simple CSS. Below Code
solution2
1 ACCPTED 2020-01-17 13:16:17
For those who are interested:
I've got it done! The solution was to set a specific width. Not a relative width like 100%.
Thank you all for your help.
solution3
0 2019-12-11 11:49:31
Add overflow-x: auto; for body class and set top: 20px; left: 0; top: 20px; left: 0; for filter class.
Hope this is the solution that you are looking for.
body { height: 100%; display: block; } .header { background-color: red; position: fixed; left: 0; top: 0; width: 100%; z-index: 1; } .body { padding-top: 20px; width: 100%; height: 100%; overflow-x: auto; } .filter { display: flex; flex-direction: row; align-items: center; background-color: blue; width: 100%; position: sticky; position: -webkit-sticky; top: 20px; left: 0; z-index: 1; } th { width: 200px; background-color: purple; position: sticky; top: 40px; } td { width: 200px; background-color: lightblue; } table { position: relative; border-collapse: collapse; width: 1500px; }
<body> <div class="header"> Header </div> <div class="body"> <h2> Headline </h2> <div class="filter"> Filters </div> <span>some text</span> <div class="table"> <table> <thead> <tr> <th>a</th> <th>a</th> <th>a</th> <th>a</th> <th>a</th> <th>a</th> <th>a</th> <th>a</th> <th>a</th> <th>a</th> <th>a</th> <th>a</th> </tr> </thead> <tbody> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> <tr> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> <td>b</td> </tr> </tbody> </table> </div> </div> </body>
solution4
0 2019-12-11 11:56:57
I have just added a little css and everything works:)
.table {
overflow-x:auto;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
CSS “position: sticky” on horizontal scroll
Is it possible to set the css position property independantly for vertical and horizontal axes?
How to set vertical and horizontal scrollbar for table?
How can I fix the position of Sticky Header on Scroll?
How to fix the position of a sticky sidebar when screen width is small?
RSpec and Capybara: How to get the horizontal and vertical position of an element
How can I mimic fixed positioning for horizontal scrolling but maintain normal vertical scrolling? (Sticky column for a table)
How to set horizontal scroll position react
How to set different anchors in QML + JS for horizontal & vertical orientation
Dynamic Table Vertical & Horizontal scrolling sticky header and fixed column
Related Tags