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

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');

    }

   

}

调整大小时出现问题

Answer 1

代码的作用是什么：获取具有 ID 的元素的位置id ="skills"，并从该值中减去图片所在的 DIV 元素的高度，并将该值设置为滚动的最大值。您已手动设置690。变化是，现在这个 IF 自动监听，哪个将首先出现id ="skills"或690我希望我对你有所帮助$(window).bind('scroll', function (e) {&nbsp; &nbsp; parallaxScroll();});function parallaxScroll() {&nbsp; &nbsp; var scr = $(window).scrollTop();&nbsp; &nbsp; var nel = $("#skills").offset().top - $("#hero-img").height();&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var scrolled = $('#hero-img').length - $(window).scrollTop();&nbsp; &nbsp; if (scr < nel && scr < 690) {&nbsp; &nbsp; &nbsp; &nbsp; $('.hero-img').css('top', (0 - (scrolled * 1.1)) + 'px');&nbsp; &nbsp; &nbsp; &nbsp; $('.hero-img').css('right', (0 - (scrolled * .3)) + 'px');&nbsp; &nbsp; }&nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; $('.hero-img').css('top', ('top' - (scrolled * 1.1)) + 'px');&nbsp; &nbsp; &nbsp; &nbsp; $('.hero-img').css('right', ('right' - (scrolled * .3)) + 'px');&nbsp; &nbsp; }}.hero .hero-img {&nbsp; &nbsp; margin-left: auto;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; right: 0;&nbsp; &nbsp; opacity: 1;&nbsp; &nbsp; /* bottom: 0; */&nbsp; &nbsp; top: 0px;&nbsp; &nbsp; max-height: auto;&nbsp; &nbsp; max-width: 100%;}.hero .hero-img img {&nbsp; &nbsp; max-height: 100%;&nbsp; &nbsp; max-width: 100%;&nbsp; &nbsp; min-width: 160px;&nbsp; &nbsp; min-height: 320px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><section class="hero" id="hero">&nbsp; &nbsp; <div id="hero-img" class="hero-img">&nbsp; &nbsp; &nbsp; &nbsp; <img src="main.png">&nbsp; &nbsp; </div></section><div>&nbsp; &nbsp; ABOUT&nbsp; &nbsp; <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">&nbsp; &nbsp; SKILLS&nbsp; &nbsp; <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>