I have integrated a "scroll down" button on my website. I want this scroll down button to gradually decrease in opacity as the user scrolls further down the page. However, I am encountering two issues with this implementation. Firstly, when I use a standard fade in and out effect, the opacity of the element jumps as it transitions between different z-index values, resulting in an unpleasant visual effect. Here is the JavaScript code snippet I used:
$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$('.godown').fadeOut();
}
else
{
$('.godown').fadeIn();
}
});
You can view the code here.
Next, I attempted to create a smoother transition by adjusting the opacity based on the scroll position from the top of the page. However, I haven't been successful in making this code work effectively:
var target = $('.godown'),
targetHeight = target.outerHeight();
$(document).scroll(function(e) {
var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
if (scrollPercent >= 0) {
target.css('opacity', 1 - scrollPercent);
}
});
I would greatly appreciate any assistance in combining these two methods seamlessly, while also addressing the issue of jumping opacity experienced in the provided CodePen example.