通过滚动和调整滚动大小在关于部分中使用英雄图像

Question

我正在建立我的投资组合网站，我想通过移动和调整图像大小将英雄部分图像用于关于我们的下一部分，作为一个猜测，我已经固定了大约 700 像素的高度，图像有滚动。但问题是它无法调整屏幕尺寸。有没有办法移动它，使其始终适合滚动部分？下面是显示问题的代码片段和 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

Answer 1

代码的作用：

获取 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>

通过滚动和调整滚动大小在关于部分中使用英雄图像

Using hero Image in about section by scrolling and resizing on scroll

javascript

html

css

image-resizing

responsiveness