Jan 25, 2017

Stick your menu, position:sticky has landed to Chrome

position:sticky has landed to Chrome 56! Basically, when an element that is...

position:sticky has landed to Chrome 56! Basically, when an element that is position sticky, starts relative but becomes fixed after that element reaches a certain scroll position.

Before position:sticky existed, the only way to simulate this behavior required listening every scroll events in Javascript and switching the position of the element from relative to fixed.

This is really common in the web and probably you saw it in hundreds of websites.

MDN says:

Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

The Old Way


     const header = document.querySelector(".article__header");
     const topHeader = header.offsetTop;

      function makeHeaderSticky(e) {
        const topWindow = window.scrollY;
        if (topWindow >= topHeader) {
          header.classList.add('is-sticky');
        } else {
          header.classList.remove('is-sticky');
        }
      }

      document.addEventListener('scroll', makeHeaderSticky);

Try this:

There’s a big problem here! What if you want to do this for each header as the user scrolls? This won’t work! You are going have to do some changes to that code to something that is going to listen for each header you want to get fixed.

In general, listening every scroll is a really bad idea when we talk about performance. Thanks godness, we now have this feature in CSS and as I said it has just landed to Chrome 56!

The New Way

The style of the header of the last example was this:


.article__header{
  position: relative;
  margin: 0 auto;
  top: 50px;
  width: 85%;
  background: #2196F3;
  padding: 15px;
  color: #FFF;
  font-size: 28px;
  font-family: 'Merriweather', serif;
}

just change

 position: relative

to

 position: sticky

and magic!! No need to write any code, awesome isn’t it? 😎😎

Try this

Another example


.header{
  position: sticky;
  top: 15px; /* This is the threshold */
}

This element will behave with a relative position until the viewport scrolls such that element would be less than 15px from the top. Then it will be fixed to 15px until the user scroll back past this threshold.

These types of headers are commonly used in an alphabetized listings or schedules.

You must specify at least one top, right, bottom or left to sticky behaves as expected.

Vendor prefixed


position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;

Thank you for reading :)

Support

59
60
61
54
55
56
14
15
16

For more information: http://status.modern.ie/positionsticky

46
47
48
10.1
11
TP
9
10
11

Last updated: Tue Jul 06 2017 20:52:39 GMT+0000 (GMT)

Known Issues

  • A parent with overflow set to auto will prevent position: sticky from working in Safari
  • Chrome, Firefox and Safari 7 & below do not appear to support sticky table headers. (see also)


Source: http://caniuse.com/#search=sticky