Sticky header with jquery

冷暖自知 提交于 2019-11-29 04:34:58

问题


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!


回答1:


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.




回答2:


use position:sticky to make sticky.

Here is the article explained.



来源:https://stackoverflow.com/questions/10889509/sticky-header-with-jquery

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!