I have a logo that I want to stay halfway up the home page when scrolling, as if fixed in place until it reaches the footer.
body {
background-color: #fff;
margin: 0;
}
nav {
position: sticky;
top: 0;
width: 300px;
height: 80px;
margin:45px auto -50px;
background-color: yellow;
}
header {
height: 30vh;
background-color: #fff;
}
main {
height: 200vh;
background-color: #eee;
}
<nav>
<div class"logo">logo</div>
</nav>
<header>
</header>
<main>
<p>body text</p>
</main>Do you think this is feasible?