How to get a changing height value of one element and return it as a CSS "top" value on another element in jQuery?

Question

I have a div called "header" that shrinks its height when the user scroll down the page.

Under the "header" I have another div called "menu". I want the menu to be "position absolute" with a "top: xy" value that is the same as the height of the "header", even when it changes.

With:

var height_of_div1 = $(".header").css('height');
$(".menu").css('top',height_of_div1);

...I can dynamically adjust the menu's "top: xy" value based on the initial height of the "header".

But I need to automatically adjust it when the height of the "header" changes.

Can I accomplish it with jQuery?

Thank you so much in advance.

Answer 1

Your jQuery code is correct to fetch header height and use the value to adjust position top. But you need to apply it with scroll listener.

window.addEventListener('scroll',function(){
  var height_of_div1 = $("#header").css('height');
  $('.menu').css('top', height_of_div1)
});