jQuery:如何获取标头的动态高度

Question

我是jQuery的新手。我想不出解决这个问题的办法。

所以，问题是，我想要一个固定的标题在我的网站。我用CSS做的。但是我想给主容器div(就在标题的下方)一个页边距-头部高度的顶部。

例如，如果#masthead (标头)高度为100px，我想给.site-container一个100px的页边距。

我可以很容易地使用CSS，但由于某些原因，会有不同的标题高度在不同的页面。或者假设我不知道标题的高度。

所以我想用jQuery来做。

这是密码-

jQuery(document).ready(function($) {

  var header = document.getElementById("masthead");

  var header_height = header.offsetHeight + "px";

  $( '.site-content' ).css( {
          'margin-top': header_height
  } );

});

它工作得很完美。但只有一个问题。

也就是说，我的网站上的标题高度在不同的屏幕大小变化。在桌面屏幕大小中，#masthead的高度是80px，在平板电脑中，屏幕大小是160px，而在移动设备中，它是60px。

但是，标题高度的值不随jQuery中屏幕大小的变化而变化。

在jQuery中，我希望变量header的值随屏幕大小的变化而动态变化。

请注意，我正在一个WordPress网站工作。

请帮帮我。

谢谢。

Answer 1

使用

• 使用窗口调整大小函数

您还可以使用：(以使您的生活更轻松:)

• jQuery选择器
• .outerHeight()以“获取当前计算的外部高度(包括填充、边框和可选边距)”

示例代码

jQuery(document).ready(function($) {
     // When the window resizes
    $(window).on('resize', function () {
         // Get the height + padding + border of `#masthead`
         var mastHeight = $('#masthead').outerHeight();

        // Add the height to `.site-content`
        $('.site-content').css('margin-top', mastHeight); 
    });

     // Trigger the function on document load.
    $(window).trigger('resize');
});

Answer 2

在window.resize上编写相同的函数。

顺便说一句，在调整屏幕大小后，重新加载页面，希望您的代码能够正常工作，因为它将获得文档就绪功能。

Answer 3

您可以在页面加载和窗口大小调整时执行相同的函数。

jQuery(document).ready(function($) {
  function resizeContent(){
  var header = document.getElementById("masthead");
  var header_height = header.offsetHeight + "px";
  $( '.site-content' ).css( {
          'margin-top': header_height
  });
  }
  resizeContent();
  $(window).resize(resizeContent);
});