希望能得到一些帮助,我不是 jQuery 方面的专家,所以请多多包涵。
我有 2 个 expandable/collapsible<div>
包含动态搜索优化链接,默认折叠状态显示前 12 个链接,并带有一个“显示更多”切换按钮,单击该按钮会展开<div>
以显示完整的链接集。
我需要知道这些的高度<div>
,我可以这样得到:
var heightRefLinks = $('.search-refine').outerHeight(true);
但这仅在单击“显示更多”切换按钮之前捕获折叠高度,我如何也获得展开高度?
我需要这样做的原因是因为我有一个工具栏元素,一旦你滚动到它,它就会“粘”到视口的顶部,工具栏只需要“粘”到视口,而搜索结果列表是在视图中,一旦它们不在视图中,工具栏就会从视口中“脱离”。为了“不粘”,我必须为插件选项设置一个 px 值:bottomBound
这是从视口底部到列表底部的 px 高度。我在列表下方有一些元素,它们都有静态高度,所以让“不粘”行为起作用并不麻烦,但随后出现了前面提到的可扩展/可折叠<div>
的。
编辑:包括使用此插件的 jQuery:http: //themousepotatowebsite.co.za/introducing-the-stick-to-top-plugin/
// get the heights of various elements
var heightToolbar = $('.sticky-panel-toolbar').outerHeight(true);
var heightContentMeta = $('.property-listing-meta').outerHeight(true);
var heightLastPropItem = $('.property-listing:last-child > .property-tile:last- child').outerHeight(true);
var heightFooter = $('.footer').outerHeight(true);
// set bottom gaps
var bottomGap = heightFooter + 32;
var bottomGapToolbar = heightToolbar + heightFooter + heightContentMeta + heightLastPropItem;
// 'Toolbar - Search Results' version
$('.sticky-panel-toolbar-search').stickToTop({
bottomBound: bottomGapToolbar,
onStick: function() {
$(this).addClass('stuck');
},
onDetach: function() {
$(this).removeClass('stuck');
}
});
heightContentMeta
是我正在努力解决的问题,因为这是<div>
搜索结果列表之后的所有内容的容器,其中包含<div>
2 个可扩展/可折叠<div>
的。我还在<iframe>
那里注入了一个 Google Adwords,我也无法获得高度,但我想首先关注可扩展/可折叠<div>
的。