I'm encountering an issue with CSS absolute positioning, where the element appears above the scrollbar...
Here is my code:
document.addEventListener("DOMContentLoaded", () => {
const h1 = overflow.querySelector("header h1")
overflow.onscroll = e => h1.classList.toggle("static", overflow.scrollTop > h1.offsetTop)
})body {
font-family: Arial;
}
#app {
height: 80vh;
width: 80vw;
margin: 10vh auto;
position: relative;
}
#overflow {
overflow: auto;
height: 100%;
}
#app header {
background: lightblue;
padding: 1rem;
}
#app header h1,
#app header h2,
#app header p {
margin: 0;
}
#app header h1.static {
position: absolute;
top: 0;
left: 0;
background: lightblue;
padding: 1rem;
width: 100%;
box-sizing: border-box;
}
#app main {
padding: 1rem;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="./style.css">
<script type="text/javascript" src="./script.js"></script>
</head>
<body>
<div id="app">
<div id="overflow">
<header>
<h2>SubTitle</h2>
<h1>Main Title</h1>
<p>Some extra text</p>
</header>
<main>
... (long Lorem Ipsum text omitted for brevity) ...
</main>
</div>
</div>
</body>
</html>The desired behavior is for the title to move along with the scroll but using a sticky position is not working in this case... The current issue is that while it works correctly, the scrollbar overlaps the absolute element when scrolling...
Any suggestions on how I could resolve this?
Thanks in advance!
EDIT: Running Firefox on Xubuntu Linux, here's the observed result: https://i.stack.imgur.com/7XSjX.gif