Getting a sticky header to “push up”, like in Instagram's iPhone app using CSS and jQuery

Question

The Instagram app has a nice sticky header that pushes the current one up in place of the new one. I found a great tutorial on how to do this natively for Android, but I\'m

Answer 1

Make sure to wrap it in div

Notice the 6th heading as it is not wrapped in div

h1, h2{
position: sticky;
top: 0;
}

div{
height: 500px;
}

lorem ipsum doloro sit 
 amet 1



lorem ipsum doloro sit 2



lorem ipsum doloro sit 3



lorem ipsum doloro sit 
 amet 4



lorem ipsum doloro sit 
 amet 5


lorem ipsum doloro sit 
 amet 6




lorem ipsum doloro sit  7



lorem ipsum doloro sit 
 amet 8



lorem ipsum doloro sit 
 amet 9