javascript - 滚动时使 div 高度增大和缩小(React)

Question

基本上我的网站顶部有一个带有 Logo 的 div，最初 Logo 有一个高度，div 的大小将调整为 Logo 高度(笔中为 200 像素)。

我想做的是，向下滚动时使 Logo 变小，向上滚动时使 Logo 变大，基本上 scrollY 值需要以某种方式链接到图像高度(直到我向下滚动到我所在的位置不想继续缩小 Logo )。

我已经尝试使用状态设置高度 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);