-
Notifications
You must be signed in to change notification settings - Fork 3
/
scroll.html
97 lines (92 loc) · 11.7 KB
/
scroll.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#main {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#top {
background: red;
height: 50px;
width: 100%;
position: absolute;
}
#content {
overflow: auto;
flex: 1;
}
</style>
<body>
<div id="main">
<div id="top"></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat massa quis diam rhoncus, at condimentum erat rhoncus. Donec suscipit ante lorem, ut lobortis tortor ultrices nec. Phasellus consequat, libero nec mattis elementum, odio tortor consectetur lacus, eu vulputate leo dui vel lectus. Quisque in nisl ac nulla tincidunt fermentum vitae sed lacus. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis eleifend sit amet nulla vitae varius. In luctus ligula in neque tristique dapibus. Etiam tempor viverra neque, sit amet semper felis efficitur eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ac vestibulum lorem.
Cras semper lacus vel magna venenatis, ac elementum ex porta. Curabitur id mollis lorem. Etiam accumsan tortor ac nibh hendrerit, non sodales leo mollis. Nam augue orci, consequat vel mollis in, gravida a enim. Sed congue sed nibh eu ultrices. Aliquam euismod, est id sollicitudin tempor, risus lacus scelerisque tortor, vel dignissim ligula lorem ac erat. Proin dictum velit feugiat facilisis malesuada. Suspendisse quis enim et nisi euismod tempus at ut tortor. Praesent vel dolor nunc. Sed vel ipsum eros. Suspendisse sed egestas ante, in dignissim orci.
Proin ipsum justo, finibus quis metus ac, tempor faucibus eros. Nullam blandit neque tellus, vel congue turpis blandit sit amet. Aenean lacinia, velit ac condimentum commodo, sem eros dapibus odio, vel tincidunt orci eros non nisl. Nullam nulla tortor, rhoncus ut ante sit amet, consectetur tincidunt turpis. Fusce ornare augue non pharetra viverra. Aenean velit ex, viverra a augue quis, laoreet elementum ex. Nam consectetur accumsan augue, eu pellentesque quam posuere at. Fusce condimentum pellentesque commodo. Nulla rutrum eros et ex finibus dapibus. Praesent cursus dolor vitae dui varius egestas. Nullam ut nisl luctus ipsum dapibus placerat in aliquet arcu.
Ut rhoncus, nisi non pellentesque egestas, est diam congue quam, in auctor mi sapien et neque. Phasellus molestie massa id metus aliquam commodo. Phasellus condimentum aliquam nisi, vitae accumsan leo. Praesent ac ligula vel est faucibus ornare. Suspendisse sit amet urna pretium, dictum dui vitae, auctor orci. Quisque odio enim, fringilla sed ante sed, luctus facilisis augue. Nunc consectetur feugiat molestie. Etiam molestie cursus commodo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam at tempus felis, ut pretium neque. Aenean accumsan felis et eros placerat suscipit. Proin laoreet consequat metus et elementum. In id vulputate neque, in porta mauris. Nunc leo sapien, feugiat nec cursus ut, rutrum eu sapien. Nunc ex ipsum, tincidunt ut bibendum non, fringilla sed ex. Donec vitae pellentesque nisi.
Curabitur felis lorem, elementum eu risus non, ultrices lacinia nisl. Integer eu orci erat. In non ex dictum, interdum libero ut, hendrerit ante. Curabitur nec lacinia enim, vel scelerisque odio. Vestibulum a blandit magna. Donec eu varius purus. Duis tempus mi at ante hendrerit, eu consequat magna iaculis. Proin pretium erat nec pharetra posuere. Aliquam maximus felis commodo ultricies aliquet. Ut malesuada quam non lorem accumsan tempus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat massa quis diam rhoncus, at condimentum erat rhoncus. Donec suscipit ante lorem, ut lobortis tortor ultrices nec. Phasellus consequat, libero nec mattis elementum, odio tortor consectetur lacus, eu vulputate leo dui vel lectus. Quisque in nisl ac nulla tincidunt fermentum vitae sed lacus. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis eleifend sit amet nulla vitae varius. In luctus ligula in neque tristique dapibus. Etiam tempor viverra neque, sit amet semper felis efficitur eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ac vestibulum lorem.
Cras semper lacus vel magna venenatis, ac elementum ex porta. Curabitur id mollis lorem. Etiam accumsan tortor ac nibh hendrerit, non sodales leo mollis. Nam augue orci, consequat vel mollis in, gravida a enim. Sed congue sed nibh eu ultrices. Aliquam euismod, est id sollicitudin tempor, risus lacus scelerisque tortor, vel dignissim ligula lorem ac erat. Proin dictum velit feugiat facilisis malesuada. Suspendisse quis enim et nisi euismod tempus at ut tortor. Praesent vel dolor nunc. Sed vel ipsum eros. Suspendisse sed egestas ante, in dignissim orci.
Proin ipsum justo, finibus quis metus ac, tempor faucibus eros. Nullam blandit neque tellus, vel congue turpis blandit sit amet. Aenean lacinia, velit ac condimentum commodo, sem eros dapibus odio, vel tincidunt orci eros non nisl. Nullam nulla tortor, rhoncus ut ante sit amet, consectetur tincidunt turpis. Fusce ornare augue non pharetra viverra. Aenean velit ex, viverra a augue quis, laoreet elementum ex. Nam consectetur accumsan augue, eu pellentesque quam posuere at. Fusce condimentum pellentesque commodo. Nulla rutrum eros et ex finibus dapibus. Praesent cursus dolor vitae dui varius egestas. Nullam ut nisl luctus ipsum dapibus placerat in aliquet arcu.
Ut rhoncus, nisi non pellentesque egestas, est diam congue quam, in auctor mi sapien et neque. Phasellus molestie massa id metus aliquam commodo. Phasellus condimentum aliquam nisi, vitae accumsan leo. Praesent ac ligula vel est faucibus ornare. Suspendisse sit amet urna pretium, dictum dui vitae, auctor orci. Quisque odio enim, fringilla sed ante sed, luctus facilisis augue. Nunc consectetur feugiat molestie. Etiam molestie cursus commodo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam at tempus felis, ut pretium neque. Aenean accumsan felis et eros placerat suscipit. Proin laoreet consequat metus et elementum. In id vulputate neque, in porta mauris. Nunc leo sapien, feugiat nec cursus ut, rutrum eu sapien. Nunc ex ipsum, tincidunt ut bibendum non, fringilla sed ex. Donec vitae pellentesque nisi.
Curabitur felis lorem, elementum eu risus non, ultrices lacinia nisl. Integer eu orci erat. In non ex dictum, interdum libero ut, hendrerit ante. Curabitur nec lacinia enim, vel scelerisque odio. Vestibulum a blandit magna. Donec eu varius purus. Duis tempus mi at ante hendrerit, eu consequat magna iaculis. Proin pretium erat nec pharetra posuere. Aliquam maximus felis commodo ultricies aliquet. Ut malesuada quam non lorem accumsan tempus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat massa quis diam rhoncus, at condimentum erat rhoncus. Donec suscipit ante lorem, ut lobortis tortor ultrices nec. Phasellus consequat, libero nec mattis elementum, odio tortor consectetur lacus, eu vulputate leo dui vel lectus. Quisque in nisl ac nulla tincidunt fermentum vitae sed lacus. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis eleifend sit amet nulla vitae varius. In luctus ligula in neque tristique dapibus. Etiam tempor viverra neque, sit amet semper felis efficitur eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ac vestibulum lorem.
Cras semper lacus vel magna venenatis, ac elementum ex porta. Curabitur id mollis lorem. Etiam accumsan tortor ac nibh hendrerit, non sodales leo mollis. Nam augue orci, consequat vel mollis in, gravida a enim. Sed congue sed nibh eu ultrices. Aliquam euismod, est id sollicitudin tempor, risus lacus scelerisque tortor, vel dignissim ligula lorem ac erat. Proin dictum velit feugiat facilisis malesuada. Suspendisse quis enim et nisi euismod tempus at ut tortor. Praesent vel dolor nunc. Sed vel ipsum eros. Suspendisse sed egestas ante, in dignissim orci.
Proin ipsum justo, finibus quis metus ac, tempor faucibus eros. Nullam blandit neque tellus, vel congue turpis blandit sit amet. Aenean lacinia, velit ac condimentum commodo, sem eros dapibus odio, vel tincidunt orci eros non nisl. Nullam nulla tortor, rhoncus ut ante sit amet, consectetur tincidunt turpis. Fusce ornare augue non pharetra viverra. Aenean velit ex, viverra a augue quis, laoreet elementum ex. Nam consectetur accumsan augue, eu pellentesque quam posuere at. Fusce condimentum pellentesque commodo. Nulla rutrum eros et ex finibus dapibus. Praesent cursus dolor vitae dui varius egestas. Nullam ut nisl luctus ipsum dapibus placerat in aliquet arcu.
Ut rhoncus, nisi non pellentesque egestas, est diam congue quam, in auctor mi sapien et neque. Phasellus molestie massa id metus aliquam commodo. Phasellus condimentum aliquam nisi, vitae accumsan leo. Praesent ac ligula vel est faucibus ornare. Suspendisse sit amet urna pretium, dictum dui vitae, auctor orci. Quisque odio enim, fringilla sed ante sed, luctus facilisis augue. Nunc consectetur feugiat molestie. Etiam molestie cursus commodo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam at tempus felis, ut pretium neque. Aenean accumsan felis et eros placerat suscipit. Proin laoreet consequat metus et elementum. In id vulputate neque, in porta mauris. Nunc leo sapien, feugiat nec cursus ut, rutrum eu sapien. Nunc ex ipsum, tincidunt ut bibendum non, fringilla sed ex. Donec vitae pellentesque nisi.
Curabitur felis lorem, elementum eu risus non, ultrices lacinia nisl. Integer eu orci erat. In non ex dictum, interdum libero ut, hendrerit ante. Curabitur nec lacinia enim, vel scelerisque odio. Vestibulum a blandit magna. Donec eu varius purus. Duis tempus mi at ante hendrerit, eu consequat magna iaculis. Proin pretium erat nec pharetra posuere. Aliquam maximus felis commodo ultricies aliquet. Ut malesuada quam non lorem accumsan tempus.
</div>
</div>
</body>
<script>
const content = document.getElementById('content');
const topElement = document.getElementById('top');
let direction;
let lastPosition;
let lastDistance;
let changeDirectionPosition;
content.addEventListener("scroll", (event) => {
if (lastPosition < event.target.scrollTop) {
if (direction === -1) {
changeDirectionPosition = event.target.scrollTop;
console.log('UP');
}
direction = 1;
} else {
if (direction === 1) {
changeDirectionPosition = event.target.scrollTop;
console.log('DOWN');
}
direction = -1;
}
lastDistance = event.target.scrollTop - changeDirectionPosition;
lastPosition = event.target.scrollTop;
setTopHeight();
});
function setTopHeight()
{
console.log(lastDistance);
let height;
if (lastDistance > 0) {
height = 50 - lastDistance;
} else {
height = -lastDistance;
}
console.log(height);
topElement.style.height = Math.max(Math.min(height, 50), 0) + 'px';
}
</script>
</html>