My navbar element affixes prematurely when placed below my header element, making it seem as if the image in the header does not exist.
The navbar is meant to affix only when it reaches the top, but currently, it is affixing earlier. The code I used sets the offset to the scroll position of the navbar, but the calculation seems to ignore the presence of the image in the header.
I have tried various solutions such as wrapping the image in p tags, setting the image height to fixed or auto, changing the display property, and ensuring the image is not floated in the header. Strangely, adding more text in the header affects the affix position, but images are not taken into account.
*Edit: The issue is not present in the provided fiddle. http://jsfiddle.net/gwho/8sAYW/ (The fiddle does not exhibit the problematic behavior as seen locally).
The coffeescript JS code:
ready = ->
$('.affixable').affix({
offset: { top: $('.affixable').offset().top }
});
$('nav').height($('.affixable').height());
$(document).ready(ready);
$(document).on('page:load', ready);
**Edit: The behavior on localhost differs from the fiddle, as shown in the screenshot.
https://i.sstatic.net/Em4GL.jpg
The issue may be related to how images are loaded in Rails's asset pipeline, causing the offset position of the navbar in the JS code to be calculated before the image is rendered. This is not an issue in the JS fiddle.
How can I delay the execution of the JavaScript code to ensure it runs after all images are loaded?