通过滚动和调整滚动条大小来使用英雄图像

问题描述

我正在建立自己的投资组合网站，并且我考虑过通过移动和调整图像的尺寸将英雄部分图像用于下一个部分，因为我已经确定了图像必须滚动到700px的高度。但问题在于它无法调整屏幕大小。有没有一种方法可以移动它，使其始终适合滚动的“关于”部分？下面是显示该问题的代码段和gif。

<!--HTMl-->
<section class="hero" id="hero">
    <div id="hero-img" class="hero-img" ><img  src="main.png"></div>   
</section>

/*CSS*/
.hero .hero-img{
    margin-left: auto;
    position: absolute;
    right: 0;
    opacity: 1;
    bottom: 0;
    max-height: auto;
    max-width: 100%;  
}
.hero .hero-img img{
    max-height: 100%;
    max-width: 100%;
    min-width: 160px;
    min-height: 320px;  
}

//JavaScript//
$(window).bind('scroll',function(e){
parallaxScroll();
});

function parallaxScroll(){
    var scr = $(window).scrollTop();
   var scrolled =document.getElementsByName('hero-img').length - $(window).scrollTop();  
   if(scr<690){
       $('.hero-img').css('top',(0-(scrolled*1.1))+'px');
       $('.hero-img').css('right',(0-(scrolled*.3))+'px');
    }
    else
    {
        $('.hero-img').css('top',('top'-(scrolled*1.1))+'px');
        $('.hero-img').css('right',('right'-(scrolled*.3))+'px');
    }
   
}

Problem with resizing

解决方法

代码的作用是什么

获取ID为id ="skills"的元素的位置，并从该值中减去图片所在的DIV元素的高度，并将此值设置为滚动最大值。

您已经手动设置了690。所做的更改是，现在此IF会自动侦听，它将首先出现id ="skills"或690

希望我能对您有所帮助

$(window).bind('scroll',function (e) {
    parallaxScroll();
});

function parallaxScroll() {
    var scr = $(window).scrollTop();
    var nel = $("#skills").offset().top - $("#hero-img").height();
    
    var scrolled = $('#hero-img').length - $(window).scrollTop();

    if (scr < nel && scr < 690) {
        $('.hero-img').css('top',(0 - (scrolled * 1.1)) + 'px');
        $('.hero-img').css('right',(0 - (scrolled * .3)) + 'px');
    }
    else {
        $('.hero-img').css('top',('top' - (scrolled * 1.1)) + 'px');
        $('.hero-img').css('right',('right' - (scrolled * .3)) + 'px');
    }

}

.hero .hero-img {
    margin-left: auto;
    position: absolute;
    right: 0;
    opacity: 1;
    /* bottom: 0; */
    top: 0px;
    max-height: auto;
    max-width: 100%;
}

.hero .hero-img img {
    max-height: 100%;
    max-width: 100%;
    min-width: 160px;
    min-height: 320px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<section class="hero" id="hero">
    <div id="hero-img" class="hero-img">
        <img src="main.png">
    </div>
</section>

<div>
    ABOUT
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<div id="skills">
    SKILLS
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>