Question

基本上，我在网站顶部有一个带徽标的div，最初该徽标具有高度，并且div的大小将调整为徽标的高度（笔中为200px）。

我想做的是，使徽标在向下滚动时变小，或者在向上滚动时变大，基本上，scrollY值需要以某种方式与图像高度相关联（直到我在向下滚动的位置不想继续缩小徽标）。

我尝试将height css属性设置为一个状态，并使用事件监听器对其进行更新，该事件监听器会在每次检测到滚动时更新该状态。

这没有用（但也许我编码错了）。

有什么主意我该怎么做？

这是JS：

以下是CSS：

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);

这是笔：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);

滚动时使div高度增加和缩小（反应）

1 个答案: