I have a jQuery script set up on this particular webpage just before the ending body tag. Here is the script:
<script>
$(document).ready(function(){
var demomain = $(".demo-bg section");
var demomainW = demomain.height()+ 150;
$('head').append('<style>.demo-footer{top:'+ demomainW +'px !important;}</style>');
console.log("HEIGHT --> "+demomain.height());
});
</script>
</body>
The purpose of this script is to calculate the height of a specific section above the footer so that the footer can adjust its position using CSS accordingly. I attempted achieving this without jQuery, solely with plain CSS, but couldn't get it to work. Is there an alternative method using just CSS?
Despite my efforts, the script does not always load correctly initially (tested on various devices). I made sure to initiate the function within the document ready section, and yet, I'm unsure what might be causing this issue...
I would greatly appreciate any help or suggestions. Thank you.