After nearly completing my goal of achieving a full-screen welcome image that fades out upon loading and re-enables scrollbars on larger screens, I have encountered an issue. When the image fades out, text and background colors either load or reload, while images and positioning are not affected.
I would greatly appreciate any suggestions or ideas to resolve this problem. My attempts to remove CSS/HTML lead me to believe that the issue lies within the JavaScript code below:
if ($(window).width() > 769) {
$(window).load(function() {
var isshow = sessionStorage.getItem('isshow');
if (isshow== null) {
sessionStorage.setItem('isshow', 1);
document.documentElement.style.overflow = 'hidden';
document.body.scroll = "no";
$.when($('#jPopup').show().delay(4000).fadeOut(2000))
.done(function() {
document.documentElement.style.overflow = 'auto';
document.body.scroll = "yes";
});
}
});
}
I have also experimented with using $(document).ready instead of window.load.