Sticky header with jquery

I would like to create some two sticky headers, like this site: http://www.trendyol.com/Kappa/ButikDetay/8690 When you scroll down, the first heading is merged with the second sticky element. After that, they both descend together. How can I do it? Thanks for the support!

+8
jquery header sticky
source share
2 answers

How this is done is pretty easy. You check the scroll position and if it is below a certain number, you show the fixed position element at the top (and hide when the scroll position goes to backup).

As the saying goes, there is a great plugin that can help: https://github.com/imakewebthings/jquery-waypoints

With the demo exactly what you want: http://imakewebthings.com/jquery-waypoints/sticky-elements/

As an update from one of the comments, http://stickyjs.com may be a more supported library.

+7
source share

use position:sticky to make it sticky.

The following is an article.

+4
source share

All Articles