Bootstrap：affix.js - 当我用 js 调用它时，我无法获取另一个元素的高度并将其放入对象中

Posted 2023-03-06

【中文标题】Bootstrap：affix.js - 当我用 js 调用它时，我无法获取另一个元素的高度并将其放入对象中

【英文标题】：Bootstrap: affix.js - when I call it with js I cannot get height of another element and put it into object

【发布时间】：2014-03-31 13:29:00

【问题描述】：

这是我的html代码：

<div class="masthead">
    <img class="img-responsive" data-src="holder.js/990x150/auto" >
</div>
<!-- /container -->
<div id="menu-gora" class="navbar navbar-inverse  affix-top">

Img 是响应式元素，在我的笔记本电脑上它有 150 像素。当我尝试时：

$(document).ready(function()
        $('#menu-gora').affix(
          offset: 
            top: 150
          
        );
    );

它工作正常。但它不适用于：

top: $('.masthead img').height()

它在超过 30 像素后开始“粘贴”。每时每刻。我需要它来响应，我不知道我做错了什么：/

当我用console.log($('.masthead img').height()) 读取值时，它显示了正确的值。有什么问题？

【参考方案1】：

根据引导文档，获得动态高度的“正确”方法是在函数中返回值，例如

$('#menu-gora').affix(
    offset: 
        top: function () 
            return (this.top = $('.masthead img').height());
       
    
);

但是！这不考虑动态大小的内容，因此例如，如果您有一个旋转木马或手风琴的东西会改变附加元素的高度，您将不得不重新计算新的高度。据我所知，没有办法动态更改偏移量。现在我正在做的只是在大小发生变化时重新应用词缀（我的附加菜单上方有未知数量的折叠）。