0

I'm very unfamiliar and still learning javascript/jQuery and I'm having trouble putting together the syntax to change a secondary navigation bar offset position to stick to a header that adjusts its size when the screen size changes (logo is setup to viewpoint percentage, hence its height varies with screen size).

So far I got the first part of the following script to calculate the header outerHeight and it works on any screen size but only on the first page load (not while resizing in real time).

jQuery(document).ready(function resizeHeader ($){
$('#CPOP-header').each(function(){ 
    $('#CPOP-sticky-sub-menu').css({
        'top' : $(this).outerHeight(true) + 'px'});
    });
$(function() {
$(window).on('resize',resizeHeader);
alert($('#CPOP-header').outerHeight(true)+'px'); // works on first page load only, will remove later
});
});

However, I want it to "monitor" browser window resize dynamically to avoid browser refresh but I can't figure out how to bind or merge the second part on the same script since I'm not very familiar with javascript/jQuery:

    $(function() {
    $(window).on('resize',resizeHeader);
    alert($('#CPOP-header').outerHeight(true)+'px'); // works on first page load only, will remove later
    });

This is for a WordPress/Elementor website, the code will be inserted in an HTML widget.

Any help will be much appreciated!

OscarC
  • 1
  • Possible duplicate of https://stackoverflow.com/questions/9828831/jquery-on-window-resize – Ali Lashini Aug 01 '22 at 20:30
  • Thank you. Not entirely the same, on document load works fine but I can't make it work on resize (I've tried several examples of the post); I can't figure it out, I don't know javascript/jQuery :( – OscarC Aug 01 '22 at 22:29

1 Answers1

0

if anyone is looking for something similar, here it is

const $ = jQuery;
function resizeHeader () {
  $('#CPOP-header').each(function(){
    $('#CPOP-sticky-sub-menu')
      .css({'top' : $(this).outerHeight(true) + 'px'})
  });
}
jQuery(document).ready(resizeHeader);
$(window).on('resize',resizeHeader);

Thank you to u/toi80QC at reddit for taking the time and giving a hand!

Tyler2P
  • 2,324
  • 26
  • 22
  • 31
OscarC
  • 1