Grow height of element on scroll safari bug

Question

I have a fixed header div with a 200px height. On scroll, the height is reduced until it reaches a certain height (40px). This gives the effect of the header turning into a fixed header once user reaches the content container.

This works smooth in Firefox and Chrome, however, Safari is glitchy. Particularly, when user scrolls back up and the header increases in height. See JS Fiddle here.

$(window).scroll(function () {
    var $scrollTop     = $(window).scrollTop(),
        $element        = $('.content-container').offset().top,
        $distance      = ($element - $scrollTop);

    if ($scrollTop < $element - $newHeight) {
          header.height($distance);
       } 
});

What is causing safari to glitch so much on the height increase? What can I do to smooth this out?

Answer 1

The way to smoothen out this effect in Safari is to change the approach all together. Instead of changing the height of the header on scroll, make the content container position:relative; and set a higher z-index. Then when scroll reaches the bottom of your header (or wherever point you'd like to make the header sticky), change the z-index of the header to be higher than the content container and set it's height to your desired size.

Here is the JS. Please see this JS Fiddle for demo and the rest of code (css, html).

$(window).scroll(function () {
    if ($scrollTop > $element - $newHeight) {
        header.height($newHeight).css("z-index", 1000);
    } 
    else {
        header.css("z-index", 100).height($oldHeight);
    }
});

Also, consider using requestAnimationFrame instead of onScroll. It''ll be lighter weight.