I have implemented the following JavaScript code to create a "fade in" effect for an image triggered by a scroll event. However, the .hide function I am using to hide the image initially only works when the page loads at localhost:3000.
Once I navigate back to the main page by clicking on a link:
<%= link_to 'Main', root_path %>
The main page loads without the .hide functionality working as expected.
I'm puzzled why the .hide function works when the page initially loads but not when I navigate back to the same page. The rest of the JavaScript functions correctly - I can scroll and see the image fading in and out based on my scrolling position. However, I specifically require the image to start hidden, which only seems to work when the page is loaded initially. Any assistance would be greatly appreciated.
function isElementVisible(elementToBeChecked) {
var TopView = $(window).scrollTop();
var BotView = TopView + $(window).height();
var TopElement = $(elementToBeChecked).offset().top + 100;
var BotElement = TopElement + $(elementToBeChecked).height();
return ((BotElement <= BotView) && (TopElement >= TopView));
}
$(document).ready(function(){
$("#ghost_logo").hide();// hide it initially
});
$(window).scroll(function(){
isOnView = isElementVisible("#logoDiv");
if (isOnView) {
//fade out small image once main logo is in view
$('#ghost_logo').fadeOut();
} else {
//fade in small image once main logo is out of view
$('#ghost_logo').fadeIn();
}
});