如何解决通过滚动和调整滚动条大小来使用英雄图像
我正在建立自己的投资组合网站,并且我考虑过通过移动和调整图像的尺寸将英雄部分图像用于下一个部分,因为我已经确定了图像必须滚动到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');
}
}
解决方法
代码的作用是什么
获取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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。