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

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) {

    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>