html里这样的效果如何实现

html里这样的效果怎么实现?
html里这样的效果如何实现
如图,首先是title1标题固定,title1的内容自由滚动。
当页面往下走的时候,title2出现,当title2的标题到达上端的时候,title1的标题被挤上去,title2固定在顶端。。。

这样的效果要怎样实现?
------解决方案--------------------
可以实现的,首先使用四个div。
div1  代表  title1
div2  代表  title1内容
div3  代表  title2
div4  代表  title2内容
判断当titl2的top为50px;或者某一个固定高度时,调整它的z-index的值大于title1的z-index即可。