I am facing a dilemma with displaying my site logo. I have both an image version and a text version, and I want to choose which one to display based on the vertical position on the page and the screen width.
<a class="navbar-brand" id="top-logo" href="#top"><img src="display_board.png" alt="Page Title"></a>
<a class="navbar-brand scroll" id="bottom-logo" href="#top">Page Title</a>
The current script handles screen resizing and scrolling once the page is loaded. However, there is an issue when loading the site on mobile devices - the image logo briefly shows before switching to the text logo, as the script file loads at the end of the HTML file.
var method_update_nav = function() {
var buffer = 200;
var horizontal_switch_point = 1200;
var vertical_switch_point = $('.carousel-indicators').offset().top - buffer;
var window_top = Math.round($(window).scrollTop());
if ($(window).width() <= horizontal_switch_point || window_top >= vertical_switch_point) {
$('nav').removeClass('top');
$('nav').addClass('bottom');
$('#top-logo').hide();
$('#bottom-logo').show();
} else {
$('nav').removeClass('bottom');
$('nav').addClass('top');
$('#top-logo').show();
$('#bottom-logo').hide();
}
};
var main = function() {
/* UPDATE NAV */
method_update_nav();
$(window).resize(method_update_nav);
$(window).scroll(method_update_nav);
}
$(document).ready(main);
If I load the script in the HTML <header>, it doesn't work because the classes referenced by JQuery are not defined yet in the HTML tags.
Is there a way to determine the correct class to show when the page loads, after the classes have been defined in the HTML tags?