私はjQueryの専門家ではないので、ご容赦ください。
動的検索絞り込みリンクを含む2 つの展開可能/折りたたみ可能な が<div>あります。デフォルトの折りたたまれた状態では、最初の 12 個のリンクと「さらに表示」トグル ボタンが表示されます。このボタンをクリックすると<div>、リンクの完全なセットが表示されます。
<div>次のように取得できるこれらの高さを知る必要があります。
var heightRefLinks = $('.search-refine').outerHeight(true);
しかし、これは「もっと見る」トグルボタンがクリックされる前の折りたたまれた高さのみをキャプチャします.展開された高さも取得するにはどうすればよいですか?
これを行う必要があるのは、スクロールするとビューポートの上部に「くっつく」ツールバー要素があるためです。検索結果のリストが表示されている間、ツールバーはビューポートに「くっつく」だけで済みます。表示されていない場合、ツールバーはビューポートから「動かなくなった」状態になります。固定を解除するには、プラグイン オプションに px 値を設定する必要があります。bottomBoundこれは、ビューポートの下部からリストの下部までの高さ (ピクセル単位) です。リストの下にいくつかの要素があり、それらはすべて静的な高さを持っているため、「スティックを外す」動作を機能させるのは面倒ではありませんが、前述の展開可能/折りたたみ可能<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>。そこにも Google Adwords が挿入されています<iframe>が、これも高さを取得するのに問題がありますが、最初に拡張可能/折りたたみ可能に焦点を当てたいと思いました<div>。