Question

我正在做SPA，其中我粘贴了标头和一张带有3张卡片（带有标题和图片）的半背景图片，唯一被卡住的是何时向下滚动顶部图片，过渡。当页面滚动时，背景图像应出现在大部分图像过渡中。当我向上滚动时，图像必须进行过渡以扩展自身并隐藏背景图像。

post.scss：

@import '../scss/common.scss';

.container{
    background-image: url("../images/bg2.jpg") ;
    height:80%;
    //background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.header{
    // background-color: $primary-background;
    padding: 10px 16px;
    // color: #f1f1f1;
    height: 50px;
}

    .sticky {
    position: fixed;
    top: 0;
    width: 100%;
    }

    .sticky + .content {
    padding-top: 100px;
    }

    .blank{
    height: 800px;
    }

post.js：

import React from 'react';
import TitleContainer from '../container/titleContainer';
import './post.scss';
import Cards from '../container/cards';
import imgT from '../images/city1.jpg';
class Post extends React.Component{
    constructor(props) {
        super(props);
        this.state={

        }
        this.header = React.createRef();
    }

    handscroll=(e)=>{
        const node = this.header.current;
        let sticky=node.offsetTop
        //console.log(node)
    // console.log(sticky)
        if (window.pageYOffset > sticky) {
            node.classList.add("sticky");
        } else {
            node.classList.remove("sticky");
        }
        // console.log(e)

    }  

    componentDidMount(){
        window.addEventListener('scroll',this.handscroll)
    }
    render(){

        return(
            <div className="container" > 
                <div className="header" ref={this.header}>
                    <TitleContainer title="World Top Cities"/>
                </div>
                <div className="content">
                    <Cards title="t1" cntryImg={imgT} />
                    <Cards title="t2" cntryImg={imgT} />
                    <Cards title="t3" cntryImg={imgT} />
                    <div className="blank"></div>                                 
                </div>

            </div>
        )
    }
}

export default Post;

card.scss：

%common-all{
    width: 100%;

}
//border:1px solid #80808040;
        //height:250px;
    // border-radius: 0 0 15px 15px ;

@mixin commonFn($border,$height,$borderRadius){
        border:$border;
        height:$height;
        border-radius: $borderRadius ;
}

.container3{
@extend %common-all;
// border-radius: 40px;
margin-top:3%;
    .title{
        @extend %common-all;
        @include commonFn(1px solid #80808040,50px,15px 15px 0 0);
        background-color: white;
    }
    .cntryImg{
        @extend %common-all;
        @include commonFn(0,250px,0 0 15px 15px)
    }

}

cards.js：

import React from 'react';
import '../scss/cards.scss'

class Cards extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return(
            <div className="container3"> 
                <div className="title">
                    {this.props.title}
                </div>
                < div className="cntryImg1">
                <img src={this.props.cntryImg} alt="noImg" className="cntryImg"/>
                </div>

            </div>

        )
    }
}

export default Cards;

我不知道我要去哪里错，我确实不知道该如何处理。当页面向下滚动时，背景图像应出现在大部分图像过渡中（此处为图像过渡）。当我向上滚动时，图像必须进行过渡以扩展自身并隐藏背景图像。请帮助我停留两天。让我知道是否不清楚。请帮助我。

已更新

不，不是将其背景图像的一半放高，在覆盖背景图像的3张“ containers3”（卡片）中，有2张“ containers3”（卡片），当我向下滚动时是白色背景，应该有过渡效果，假设10px（仅例如，我只滚动该特定卡必须发生许多像素过渡（不能一次隐藏）分别显示上下滚动时隐藏和显示背景图像的过渡效果方式，并且必须显示该10px的背景图像，位置必须没变。（这里是他们隐藏和显示背景图片的过渡方式）

如何在滚动时进行顶部图像过渡以显示背景图像

0 个答案: