As per the MDN article on position property, position: sticky is still an experimental API. Also any version Internet explorer doesn't support it yet. So,

Is there any way to achieve the same effect as that of position: sticky with or without javaScript?

I think that it is possible to acheive this effect with position: fixed and without javascript. Because the In This Article section on MDN page behaves exactly like position sticky was applied to it. Even when I disable javaScript it works well. The markup used by MDN I found with inspect element is as,

<div style="width: auto; max-height: none; top: 0px;" id="toc" class="toc toggleable">   ...  
</div>

When I scrolled down the mark up changed to include fixed class on the container div. I don't know how a new class is added without using javascript.

As per the MDN article on position property, position: sticky is still an experimental API. Also any version Internet explorer doesn't support it yet. So,

Is there any way to achieve the same effect as that of position: sticky with or without javaScript?

I think that it is possible to acheive this effect with position: fixed and without javascript. Because the In This Article section on MDN page behaves exactly like position sticky was applied to it. Even when I disable javaScript it works well. The markup used by MDN I found with inspect element is as,

<div style="width: auto; max-height: none; top: 0px;" id="toc" class="toc toggleable">   ...  
</div>

When I scrolled down the mark up changed to include fixed class on the container div. I don't know how a new class is added without using javascript.

• javascript
• html
• css
• css-position

Share Improve this question Follow asked Apr 15, 2016 at 5:58 user31782user31782 7,6071616 gold badges7979 silver badges158158 bronze badges 2

• doesn't work for me with js disabled, are you sure you refreshed the page after disabling it ? – Kaiido Commented Apr 15, 2016 at 6:07
• @Kaiido I didn't. You are right it doesn't work with js disabled. I think they used js which adds fixed class when the page is scrolled down to touch that div. – user31782 Commented Apr 15, 2016 at 6:09

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

use a javascript polyfill like fixed-sticky https://github./filamentgroup/fixed-sticky

on the In This Article section on MDN the fixed class is toggled via javascript, I do not think it's possible to toggle a class on a element on scroll event without resorting to javascript.