Увеличение и уменьшение высоты div при прокрутке (React)

По сути, у меня есть div в верхней части моего веб-сайта с логотипом, изначально логотип имеет высоту, а размер div соответствует высоте логотипа (200 пикселей в ручке).

Что я хочу сделать, так это уменьшить логотип при прокрутке вниз или увеличить при прокрутке вверх, в основном значение 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

javascript html css reactjs

07.05.2019 11:44

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

4 321

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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);

Это в значительной степени то, что я пробовал сам, но у меня не было getInitialState, в любом случае это сработало, так что большое спасибо, чувак!!

— 07.05.2019 12:51

07.05.2019 12:20