当窗口调整大小时另一个元素的高度发生变化时，如何动态更新元素的 outerHeight？答案

【问题标题】：How to Dynamically Update outerHeight of An Element When Another Element Changes in Height on Window Resize?当窗口调整大小时另一个元素的高度发生变化时，如何动态更新元素的 outerHeight？
【发布时间】：2018-12-25 08:50:36
【问题描述】：

这里有一个 jquery / javascript noob 问题。我有一个子导航元素，一旦有人点击某个滚动点，我就会将它贴在主导航的底部。为此，我将 subnav 元素偏移了主 nav 元素的高度，如下所示。

$(function() {      
  $('.sticky-nav').stickybits({
    useStickyClasses: true,
    stickyBitStickyOffset: $('.navbar-fixed-top').outerHeight(),
  });
});

我遇到的问题是“.navbar-fixed-top”在移动设备/平板电脑和桌面尺寸（高度变化为 992 像素）下的高度不同，如果有人调整屏幕大小，偏移量会变得混乱（即，如果他们从桌面开始，然后调整到移动/平板电脑的大小，则子导航上方的空间太大，因为桌面上的主导航更高）。

我的问题是，当.navbar-fixed-top元素的高度发生变化时，如何更新上面的代码来动态更新outerHeight？

我尝试了下面的代码，灵感来自这个问题的答案：Resize element width on window resize jquery，但它不起作用

$(function() {
  var topNavHeight =  $('.navbar-fixed-top').outerHeight();
  $(window).on('resize', function(event) {
    var topNavHeight = $('.navbar-fixed-top').outerHeight();
  });   
  $('.sticky-nav').stickybits({
    useStickyClasses: true,
    stickyBitStickyOffset: topNavHeight,
  });
});

谢谢！

【问题讨论】：

你不需要销毁然后用新的高度重新初始化粘性插件吗？此外，在调整大小中包含 var 意味着您正在声明一个新的本地 var 而不是更新全局 var
@Pete - 我认为你是对的，看起来 halcyon 在下面采取了类似的方法。另外，我想感谢您更改原始评论的语言。您删除了“您意识到……”，使其更像是教学评论。作为 jquery / javascript noob，局部变量问题是我没有意识到的，感谢您以具有启发性的方式指出这一点。

标签： javascript jquery

【解决方案1】：

我认为这会奏效：

$(function() {
    let stickything;

    function set_sticky() {
        if (stickything) {
            stickything.cleanup();
        }
        stickything = $('.sticky-nav').stickybits({
            useStickyClasses: true,
            stickyBitStickyOffset: $('.navbar-fixed-top').outerHeight(),
        });
    }

    $(window).on('resize', set_sticky);
    set_sticky();
});

仅更改变量是不够的，您必须告诉stickbits 进行更新。似乎没有办法更新偏移量，所以这只是重新初始化它。

【讨论】：

效果很好！谢谢！另外，请欣赏代码下方的其他上下文/解释。帮助我学习/理解这里发生了什么。