Utilizing height: 100% and overflow: auto on html/body has helped me fix a scrolling issue in Chrome. However, I've noticed that ScrollY and ScrollTop always return 0 now. Is there a way to determine the scroll position in this scenario?
Here is the HTML structure:
<html>
<body>
<div class="wrapper">
<div class="top-nav">
<div class="scroll-wrapper">
</div>
<body>
</html>
And here is the CSS used:
html {
height: 100%;
overflow: auto;
body {
height: 100%;
overflow: auto;
.wrapper {
.top-nav {
z-index: 999;
position: fixed;
top: 0;
}
.scroll-wrapper {
padding-top: 45px;
}
}
}
}
Additionally, the JavaScript code includes:
// Apply styles to top-nav when scrolling down
$('.wrapper').scroll(function () {
if (window.scrollY > 0) // always returns 0
if ($('.wrapper')[0].scrollTop > 0)
if ($('.scroll-wrapper')[0].scrollTop > 0)
}