Handle sticky footer element in jsx

_layout.scss

.sticky-footer {
    background-color: $ib-white;
    padding: $padding-base-horizontal*2;
    @media (max-width: $screen-xs-max) {
        border-radius: $border-radius-base;
        margin-bottom: $grid-gutter-width;
        box-shadow: 0 2px 0 darken($body-bg, 5%);
    }
    @media (min-width: $screen-sm-min) {
        position: fixed;
        right: 0;
        left: 0;
        bottom: 0;
        box-shadow: 0 -2px 1px 0 $gray-lighter;
        z-index: 10; // increase if needed (depending on other elements in stacking context)
    }
}

top-component.react.js

'use strict';

const _ = require('lodash');
const React = require('react');

let footer;
let marginBottom;

module.exports = React.createClass({

    getInitialState() {
        return {
            footerOffset: null
        };
    },

    componentWillMount() {
        this._onResize = _.debounce(this._onResize, 150);
    },

    componentDidMount() {
        footer = document.getElementById('sticky-footer');
        marginBottom = getComputedStyle(footer.previousElementSibling).marginBottom;
        this._setFooterOffset(footer, marginBottom);
        window.addEventListener('resize', this._onResize);
    },
    
    componentWillUnmount() {
        window.removeEventListener('resize', this._onResize);
    },    

    render() {
        const inlineStyle = this.state.footerOffset ? { 'marginBottom': this.state.footerOffset + 'px'} : {};
        return (
            <div>
                <div className="panel panel-default" style={inlineStyle}>
                    stuff in panel
                </div>
                <div className="sticky-footer" id="sticky-footer">
                    <div className="container">
                        stuff in sticky footer
                    </div>
                </div>
            </div>
        );
    },
    
    _onResize() {
        this._setFooterOffset(footer, marginBottom);
    }

    _setFooterOffset(footer, marginBottom) {
        // $screen-sm-min = 768px
        if (window.innerWidth > 768) {
            const footerHeight = footer.getBoundingClientRect().height;
            this.setState({ footerOffset: footerHeight + parseInt(marginBottom) });
        } else {
            this.setState({ footerOffset: null });
        }
    }

});