sticky header

[yoshuawuyts]

//...
window.addEventListener( 'scroll', function()
{
    //...
    if( wScrollCurrent <= 0 ) // scrolled to the very top; element sticks to the top
        element.style.top = '0px';

    else if( wScrollDiff > 0 ) // scrolled up; element slides in
        element.style.top = ( elTop > 0 ? 0 : elTop ) + 'px';

    else if( wScrollDiff < 0 ) // scrolled down
    {
        if( wScrollCurrent + wHeight >= dHeight - elHeight )  // scrolled to the very bottom; element slides in
            element.style.top = ( ( elTop = wScrollCurrent + wHeight - dHeight ) < 0 ? elTop : 0 ) + 'px';

        else // scrolled down; element slides out
            element.style.top = ( Math.abs( elTop ) > elHeight ? -elHeight : elTop ) + 'px';
    }
    //...
});
//...

sauce

[yoshuawuyts]

window.addEventListener('scroll', function() {
  // scrolled to the very top; element sticks to the top
  if (wScrollCurrent <= 0) return element.style.top = '0px'

  // scrolled up; element slides in
  if (wScrollDiff > 0) return element.style.top = (elTop > 0 ? 0 : elTop) + 'px'

  // scrolled down
  if (!(wScrollDiff < 0)) return

  // scrolled to the very bottom; element slides in
  if (wScrollCurrent + wHeight >= dHeight - elHeight) {
    elTop = wScrollCurrent + wHeight - dHeight
    return element.style.top = (elTop < 0 ? elTop : 0) + 'px'
  }

  // scrolled down; element slides out
  element.style.top = (Math.abs(elTop) > elHeight ? - elHeight : elTop) + 'px'
})