0

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.

Explorador
  • 47
  • 3
  • 9
  • Does this answer your question? [How does the "position: sticky;" property work?](https://stackoverflow.com/questions/43707076/how-does-the-position-sticky-property-work) – tacoshy Nov 17 '20 at 17:23

2 Answers2

2

If you want to use floats -

<div style="position:sticky;top:0">
tto
</div>
<div style="float:left; padding-bottom: 3000px">
blah
</div>
<div style="clear:both;"></div> //extra div needed

You must also specify at least one of top, right, bottom or left for sticky positioning to work.

If you want to know more about float - All about floats

Else

Instead of using float try using FlexBox as FlexBox gives you the layout benefits of floats, without the strange quirks and hacks.

Siona Fernandes
  • 375
  • 2
  • 21
  • This small code is working. But my original website is a little large. I am not able to fix the problem there. https://fulgid-distortions.000webhostapp.com/ look this, there is a menu at the beginning. which is a sticky element with top: 0; Still it is not staying at the top..I tried clear:both to every div tag near it..still problem is not fixed. – Explorador Dec 01 '20 at 19:49
  • 1
    add
    after div with id="underconstruction" .This should make the div sticky     – Siona Fernandes Dec 02 '20 at 08:26
0

Hellooo,

<div class="container">
<div class="sticky">
tto
</div>
<div style="float:left; padding-bottom: 3000px">
blah
</div>
</div>

.container{
  display: flex;
  flex-direction: column;
}

.sticky{
  position: sticky;
  top: 0;
}

This is working somehow. Apparently adding a container helps. Can you let me know if this is working.

JithinAji
  • 402
  • 5
  • 16
  • Hello and welcome to SO. Please edit your anwser to fulfill the SO guidelines. SO is about teaching and explainging a solution so it will be reproducable. Providing a code snipept withotu any explanation of what you did, why you did it and how it work is insufficient for SO. – tacoshy Nov 17 '20 at 17:19