I am faced with a challenge on my webpage where I need to adjust the height due to scrolling elements, while also detecting the scrollTop() distance to apply some CSS to the navigation bar. Despite setting the body's height to 100%, it appears that I am unable to accurately determine if the scrollTop has reached a certain threshold.
The following JavaScript code is what I can't seem to make work:
$(window).scroll(function() {
if( $(window).scrollTop() > 175 ) {
$('.navbar').css("box-shadow", '0 10px 12px rgba(0,0,0,.175)');
} else {
$('.navbar').css("box-shadow", '');
}
});
CSS:
[canvas=container] {
width: 100%;
height: calc( 100% - 100px );
margin-top: 100px;
overflow-y: auto;
overflow-x:hidden;
position: relative;
background-color: white; /* Basic background color, overwrite this in your own css. */
-webkit-overflow-scrolling: touch; /* Enables momentum scrolling on iOS devices, may be removed by setting to 'auto' in your own CSS. */
}
The issue arises when I set the height on the body (canvas) as the event does not trigger. However, setting the body height is necessary. Is there any workaround that would allow me to maintain the body height and still detect the scrollTop() distance effectively? Any assistance would be greatly appreciated. Thank you.