Question

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

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

我遇到的问题是“ .navbar-fixed-top”在手机/平板电脑和台式机尺寸上的高度不同（高度更改为992px），如果有人调整屏幕大小，则偏移会弄乱（也就是说，如果它们从台式机开始，然后调整为手机/平板电脑的大小，则子导航上方的空间就太大了，因为主导航在台式机中更高。

我的问题是，当.navbar-fixed-top元素的高度更改时，如何更新上面的代码以动态更新externalHeight？

受以下问题的启发，我尝试了以下代码：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,
  });
});

谢谢！

Answer 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更新。似乎没有一种方法可以更新偏移量，因此只能将其重新初始化。

在窗口调整大小时另一个元素的高度变化时，如何动态更新元素的externalHeight？

1 个答案: