滚动时使div高度增大和减小（React）

Question

基本上，我在我的网站顶部有一个div，上面有logo，最初logo有一个高度，div的大小将与logo的高度一致（笔中为200px）。

我想做的是，当我向下滚动时，使徽标变小，或者当我向上滚动时，使徽标变大，基本上，scrollY值需要以某种方式链接到图像高度（直到我向下滚动到一个点，我不想继续收缩标志）。

我尝试用一个状态设置高度css属性，并用一个事件监听器更新它，每次检测到滚动时都会更新状态。

这不起作用（但也许我编码错了）。

你知道我该怎么做吗？

这里是JS：

var Component = React.createClass({
    render: function() {
        return (
                    <div>
                        <div className="container">

                            <img src='https://www.import.io/wp-content/uploads/2017/10/React-logo-1.png' className='logo'/>

                        </div>
                        <br /><br />
                        <br /><br />
                        <br /><br />
                        <br /><br />
                        <br /><br />
                        <br /><br />
                        <br /><br />
                        <br /><br />
                        <br /><br />
                    </div>
                );
    }
});

ReactDOM.render(<Component/>, document.body);

以下是CSS：

@import "compass/css3";

body {
    font-family: 'Open Sans', sans-sarif;
    margin: 0;
}

.container {
    background-color: $color6;
    text-align: center;
    padding: 30px;
}

.logo {
    height: 200px;
}

这是笔：https://codepen.io/anon/pen/JqdjNO

Answer 1

您可以在滚动和更新样式上设置事件。见钢笔：https://codepen.io/anon/pen/dEoPxY?editors=0110

CSS:

@import "compass/css3";

body {
    font-family: 'Open Sans', sans-sarif;
    margin: 0;
}

.empty-space {
    height: 800px;
}

.container {
    background-color: $color6;
    text-align: center;
    padding: 30px;
    /*height: 200px;*/
    position: fixed;
    top: 0;
    width: 100%;
}

.logo {
    height: 100%;
}

Javascript:

var Component = React.createClass({
    getInitialState: function() {
        return {
            style: {
                logoHeight: 200
            }
        }
    },

    componentDidMount: function() {
        window.addEventListener('scroll', this.handleScroll);
    },

    componentWillUnmount: function() {
        window.removeEventListener('scroll', this.handleScroll);
    },

    handleScroll: function(event) {
        let scrollTop = window.scrollY,
                minHeight = 30,
                logoHeight = Math.max(minHeight, 200 - scrollTop);
        this.setState({
            style: {
                logoHeight: logoHeight
            }
        });
    },

    render: function() {
        return (
            <div>
                <div className="container" style={{height: this.state.style.logoHeight}}>
                    <img src='https://www.import.io/wp-content/uploads/2017/10/React-logo-1.png' className='logo'/>
                </div>
                <div className="empty-space">

                </div>
            </div>
        );
    }
});

ReactDOM.render(<Component/>, document.body);