增加卷轴标题的不透明度

Question

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

我在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

我想要的是，当我向下滚动时，透明的标题与headerStickyFadeDownEffect一起将其不透明度从0.95增加到1，当回滚到顶部时，会再次褪色到0。

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

任何帮助都将不胜感激！

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:回勾(`)用于获取字符串中的动态值

编辑:我有张贴的片段，以及屏幕截图，让你知道它的工作，当你向下滚动。PS。因为我没有你所有的代码，不管你提供了什么，我都修正了

​