Hi. On two of my Lay theme sites, javascript scroll functions that worked when making the sites suddenly have suddenly stopped working. All of these three code snippets have stopped working. Do you have any idea why, and how to make them work again? All code is added with the Custom CSS and HTML settings.
1 – On jimmylinus.com, the following code made the the About-link in second-menu offset above the footer when scrolling down.
<script>
$(window).scroll(() => {
const footerToTop = $('#footer-region').position().top;
const scrollTop = $(document).scrollTop() + $(window).height();
const difference = scrollTop - footerToTop;
const bottomValue = scrollTop > footerToTop ? difference : 0;
$('nav.second_menu').css('bottom', bottomValue+25);
});
</script>
2 – On the same site, the next and previous project arrows (as text) gradually increased in opacity when scrolling down. Now they are only visible on hover. This is the code:
<script>
$(document).ready(function(){
$(window).scroll(function(){
$('.project-arrow').css("opacity", 0+ $(window).scrollTop() / $(document).height() )
})
})
</script>
3 – And on another site, colin.no, thumbnails for previous and next projects appeared after scrolling 90% of the height. This is the code:
<script>
$(document).scroll(function() {
var scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
if (scrollPercent > 90) {
$('.project-arrow').fadeIn();
} else {
$('.project-arrow').fadeOut();
}
});
</script>
Please let me know how to fix these!
