I just found that a sticky element won't work as expected if the succeeding element is a floating element.

for example, look at the following HTML code,

<div style="position:sticky">   

tto   

</div>

<div style="float:left; padding-bottom: 3000px">  

blah  

</div>

In such cases, the sticky elements will scroll along with the first succeeding non-floating element's bottom part.
If anyone ever faced the same situation or knows a solution please let me know.