增加滚动标题的不透明度

Question

我正在使用 React js，并且页面已经完成，但我坚持的是，我无法让标题在向下滚动时增加它的不透明度。

我在 stackOverflow 上遵循了一些好人的解决方案，但结果与我想要的相反，这是他对某人的回答：ANSWER

这就是我所做的：

import React from 'react'

class Header extends React.Component{

        constructor(){      
                super()
                this.state = { opacity: 0 }   
        }

        componentDidMount () {      
                window.onscroll =()=>{
                 const newScrollHeight = Math.ceil(window.scrollY / 50) *50;
                 if (this.state.currentScrollHeight !== newScrollHeight){
                     this.setState({currentScrollHeight: newScrollHeight})
                 }
                 else
                 {
                        this.setState({currentScrollHeight:0})
                 }
               }
             }


        render(){

                const opacity = Math.max(100 / this.state.currentScrollHeight  , 1)

        return(
                <header style={{background:opacity}}>
                        <div id="logo-div">
                                <img id = "logo" src="http://demo.themewinter.com/html/exhibz/images/logos/logo.png" alt = "logo"/>
                        </div>
                        <div id="header-headings">
                                <div id="home">
                                        <h2>HOME <i className="fas fa-angle-down"></i></h2>
                                        <div className="dropdown-content">
                                                <a href="http://localhost:3000/">Home 1</a>
                                                <a href="http://localhost:3000/">Home 2</a>
                                                <a href="http://localhost:3000/">Home 3</a>
                                                <a href="http://localhost:3000/">Home 4</a>
                                                <a href="http://localhost:3000/">Home 5</a>
                                                <a href="http://localhost:3000/">Home 6</a>
                                                <a href="http://localhost:3000/">Home 7</a>
                                        </div>
                                </div>
                                <div id="about">
                                        <h2>ABOUT <i className="fas fa-angle-down"></i></h2>
                                        <div className="dropdown-content">
                                                <a href="http://localhost:3000/">About Us</a>
                                                <a href="http://localhost:3000/">Gallery</a>
                                                <a href="http://localhost:3000/">FAQ</a>
                                                <a href="http://localhost:3000/">Pricing Table</a>
                                                <a href="http://localhost:3000/">Sponsors</a>
                                                <a href="http://localhost:3000/">Venue</a>
                                                <a href="http://localhost:3000/">Error Page</a>
                                        </div>
                                </div>
                                <div id="speakers">
                                        <h2>SPEAKERS <i className="fas fa-angle-down"></i></h2>
                                        <div className="dropdown-content">
                                                <a href="http://localhost:3000/">Speaker-1</a>
                                                <a href="http://localhost:3000/">Speaker-2</a>
                                        </div>
                                </div>
                                <div id="schedule">
                                        <h2>SCHEDULE <i className="fas fa-angle-down"></i></h2>
                                        <div className="dropdown-content">
                                                <a href="http://localhost:3000/">Schedule List</a>
                                                <a href="http://localhost:3000/">Schedule Tab 1</a>
                                                <a href="http://localhost:3000/">Schedule Tab 2</a>
                                        </div>
                                </div>
                                <div id="blog">
                                        <h2>BLOG <i className="fas fa-angle-down"></i></h2>
                                        <div className="dropdown-content">
                                                <a href="http://localhost:3000/">Blog</a>
                                                <a href="http://localhost:3000/">Blog Details</a>
                                        </div>
                                </div>
                                <div id="contact">
                                        <h2>CONTACT</h2>
                                </div>
                                <div id="buy-button">
                                        <button>BUY TICKET</button>
                                </div>
                        </div>
                </header>
        )
    }
}

export default Header

我想要的是，当我向下滚动时，透明页眉的不透明度从 0.95 增加到 1，连同 headerStickyFadeDownEffect 一起，当滚动回顶部时，再次淡入 0。

我正在使用 react js 重新创建一个引导模板

任何帮助将不胜感激！

Answer 1

import React from 'react';

class Header extends React.Component {
    constructor() {
        super();
        this.state = { opacity: 0, currentScrollHeight: 0 };
    }
    componentDidMount() {
        window.onscroll = () => {
            const newScrollHeight = Math.ceil(window.scrollY / 50) * 50;

            this.setState({ currentScrollHeight: newScrollHeight });
        };
    }

    render() {
        const opacity = Math.min(this.state.currentScrollHeight / 100, 1);

        return (
            <header style={{ background: `rgba(0, 0, 0, ${opacity})`, display: 'flex' }}>
                <div id="logo-div">
                    <img id="logo" src="http://demo.themewinter.com/html/exhibz/images/logos/logo.png" alt="logo" />
                </div>
                <div id="header-headings">
                    <div id="home">
                        <h2>
                            HOME <i className="fas fa-angle-down" />
                        </h2>
                        <div className="dropdown-content">
                            <a href="http://localhost:3000/">Home 1</a>
                            <a href="http://localhost:3000/">Home 2</a>
                            <a href="http://localhost:3000/">Home 3</a>
                            <a href="http://localhost:3000/">Home 4</a>
                            <a href="http://localhost:3000/">Home 5</a>
                            <a href="http://localhost:3000/">Home 6</a>
                            <a href="http://localhost:3000/">Home 7</a>
                        </div>
                    </div>
                    <div id="about">
                        <h2>
                            ABOUT <i className="fas fa-angle-down" />
                        </h2>
                        <div className="dropdown-content">
                            <a href="http://localhost:3000/">About Us</a>
                            <a href="http://localhost:3000/">Gallery</a>
                            <a href="http://localhost:3000/">FAQ</a>
                            <a href="http://localhost:3000/">Pricing Table</a>
                            <a href="http://localhost:3000/">Sponsors</a>
                            <a href="http://localhost:3000/">Venue</a>
                            <a href="http://localhost:3000/">Error Page</a>
                        </div>
                    </div>
                    <div id="speakers">
                        <h2>
                            SPEAKERS <i className="fas fa-angle-down" />
                        </h2>
                        <div className="dropdown-content">
                            <a href="http://localhost:3000/">Speaker-1</a>
                            <a href="http://localhost:3000/">Speaker-2</a>
                        </div>
                    </div>
                    <div id="schedule">
                        <h2>
                            SCHEDULE <i className="fas fa-angle-down" />
                        </h2>
                        <div className="dropdown-content">
                            <a href="http://localhost:3000/">Schedule List</a>
                            <a href="http://localhost:3000/">Schedule Tab 1</a>
                            <a href="http://localhost:3000/">Schedule Tab 2</a>
                        </div>
                    </div>
                    <div id="blog">
                        <h2>
                            BLOG <i className="fas fa-angle-down" />
                        </h2>
                        <div className="dropdown-content">
                            <a href="http://localhost:3000/">Blog</a>
                            <a href="http://localhost:3000/">Blog Details</a>
                        </div>
                    </div>
                    <div id="contact">
                        <h2>CONTACT</h2>
                    </div>
                    <div id="buy-button">
                        <button>BUY TICKET</button>
                    </div>
                </div>
            </header>
        );
    }
}

export default Header;

您的代码中所需的更改很少

this.state = { opacity: 0, currentScrollHeight: 0 }
componentDidMount() {
    window.onscroll = () => {
        const newScrollHeight = Math.ceil(window.scrollY / 50) * 50;

        this.setState({ currentScrollHeight: newScrollHeight });
    };
}

只需将高度设置为当前，然后计算最小值，因为不透明度只需要 0-1 的值

const opacity = Math.min(this.state.currentScrollHeight / 100, 1);

由于对某些颜色应用了不透明度，因此您需要为标题添加一些颜色

<header style={{ background: `rgba(0, 0, 0, ${opacity})`, display: 'flex' }}>

PS:backtick(`) 用于获取字符串内的动态值

编辑：我已经发布了 sn-p 以及屏幕截图，以便在您向下滚动时让您知道它的工作。 PS。因为我没有你所有的代码，所以无论你提供什么问题我都解决了