Hey I have the following problem:

I have to work with code from a different agency and the scroll to function is not working properly because of the fixed header.

When the header is collapsed(minified), it scroll to a dynamic height and displays correctly, however if the header is not collapsed, the scroll functions stops earlier because it thinks the header is still big when it stops, however the header gets minified when scrolling down.

I tried static values instead of $('header').height(), but this messes up compability with other devices.

Any advice for a better solution? Thanks in advance.

;( function( Tao ) {
Tao.defer( function( $ ) {
    $( document ).on( 'click', 'a[href^="#"].scrollUp', function( e ) {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();

        var target = this.hash;
        $( 'html, body' ).stop().animate( {
            scrollTop: 0
        }, 900, 'swing', function() {
            window.location.hash = target;
        } );
    } );

    $( document ).on( 'click', 'a[href^="#"]', function( e ) {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
        var target = this.hash;
        var $item = $( this.hash );

        if ( ! $item ) {
            return;
        }


        $( 'html, body' ).stop().animate( {
            scrollTop: $item.offset().top - $('header').height()
            //scrollTop: $item.offset().top - 129
        }, 750, 'swing', function() {
            history.pushState( {}, '', target );
        } );



    } );


    $( document ).ready( function() {
        if ( document.location.hash ) {
            var $item = $( document.location.hash );

            $( 'html, body' ).stop().animate( {
                scrollTop: $item.offset().top - $('header').height()
            } );
        }
    } );

} );