CODEWITHSUNDEEP
javascripthtmlcsscss-position
user31782
user31782

Reputation: 7589

What is the alternative to position:sticky?

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.

Upvotes: 2

Views: 12680

Answers (1)

Giuseppe
Giuseppe

Reputation: 876

use a javascript polyfill like fixed-sticky https://github.com/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.

Upvotes: 2

Related Questions