by Anonymous » 11 May 2025, 22:54
Ich möchte zwei Divs mit der gleichen Geschwindigkeit scrollen. Wenn ich 25% der ersten DIV gescrollt habe, hat der zweite den gleichen Prozentsatz, aber da sie unterschiedliche Höhen haben, ist es etwas schwierig. Wenn jemand helfen könnte, wäre ich dankbar.
Code: Select all
var heightFirst = $('#first-div').height();
var heightSecond = $('#second-div').height();
$(window).scroll(function() {
let offsetFirst = document.querySelector('#first-div').getBoundingClientRect().top;
let offsetSecond = heightSecond * offsetFirst / heightFirst;
if (offsetFirst = 0) {
document.getElementById('second-div').style.top = 200 + 'px';
}
});< /code>
#background{
height: 3000px;
}
#first-div {
width: 200px;
height: 1000px;
position: absolute;
top: 200px;
background: #585f50;
}
#second-div {
width: 100px;
height: 3000px;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 200px;
z-index: 10;
}< /code>
[url=viewtopic.php?t=14917]Ich möchte[/url] zwei Divs mit der gleichen Geschwindigkeit scrollen. Wenn ich 25% der ersten DIV gescrollt habe, hat der zweite den gleichen Prozentsatz, aber da sie unterschiedliche Höhen haben, ist es etwas schwierig. Wenn jemand helfen könnte, wäre ich dankbar.[code]var heightFirst = $('#first-div').height();
var heightSecond = $('#second-div').height();
$(window).scroll(function() {
let offsetFirst = document.querySelector('#first-div').getBoundingClientRect().top;
let offsetSecond = heightSecond * offsetFirst / heightFirst;
if (offsetFirst = 0) {
document.getElementById('second-div').style.top = 200 + 'px';
}
});< /code>
#background{
height: 3000px;
}
#first-div {
width: 200px;
height: 1000px;
position: absolute;
top: 200px;
background: #585f50;
}
#second-div {
width: 100px;
height: 3000px;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 200px;
z-index: 10;
}< /code>
[/code]
Mobile version