Menu
I would like to create multiple two sticky headers just like in that website: http://www.trendyol.com/Kappa/ButikDetay/8690 When you scroll down, the first header combines with the second sticky element. After that, both of them move down together. How can I do it? Thank for advance support!
685
Sticky headers (or persistent headers) are a common pattern for keeping the header of a website or app in the same place on the screen while the user scrolls down the page. A version of this pattern is the partially sticky header, which (re)appears at the top of the page as soon as the user starts scrolling up.
To freeze the row/column we can use a simple HTML table and CSS. HTML: In HTML we can define the header row by <th> tag or we can use <td> tag also. Below example is using the <th> tag. We also put the table in DIV element to see the horizontal and vertical scrollbar by setting the overflow property of the DIV element.
The way this is accomplished is pretty easy. You check the scroll position and if it is below a certain number you display a fixed position element at the top (and hide when the scroll position goes backup).
That being said there is a great plugin that can help: https://github.com/imakewebthings/jquery-waypoints
With demo exactly what you want: http://imakewebthings.com/jquery-waypoints/sticky-elements/
AS an update from one of the comments, http://stickyjs.com might be a more supported library.
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
