jQuery-在没有固定位置的情况下滚动窗口时防止滚动元素

Question

I want to ask about prevent scroll element. I have an element that automatically scrolled when window scrolled and all website have that, because this is default. All element can scrolled when window scrolled, right ? Now, i want to prevent that automatically scroll on element when window scrolled, but i not want set that element position to fixed. How i can do that ? Any idea ?

For example :

    $(window).scroll(function(){
      if($(this).scrollTop() == 100){
        $(element) // How to prevent scroll this element without position fixed ?
      }
   });

Answer 1

There is a new CSS3 position attribute called position:sticky - which when applied (you add the offset as a data attribute).

Link from the dev notes https://developer.mozilla.org/en-US/docs/Web/CSS/position

Link from CSS tricks https://css-tricks.com/position-sticky-2/

So basically when you scroll past the offset - the element is "sticky". This achieves the same effect as applying the position:fixed style rule but without rewriting the DOM.

It suffers from the same issue as position:fixed however in that you need to apply padding to the body when the element is "stuck" since it takes it out of the page flow and all elements will sit higher in the page since the element is no longer calculated in height.

But the upshot is that you can apply the sticky class without javascript / jquery and without hte cost of the scroll lisener on the page.