WordPress的：基於毗鄰內容的大小顯示額外的側邊欄小部件？

我希望能夠根據相鄰內容div的高度顯示或隱藏側邊欄中的內容，但我不確定是否/如何完成。WordPress的：基於毗鄰內容的大小顯示額外的側邊欄小部件？

例如，在我當前項目（http://djryanmcnally.pixelworx.it/?page_id=18）的博客頁面上，我在邊欄中有兩個小工具（一個用於最新的推文，一個用於最新的音樂新聞），但您可以在此頁面上看到內容的博客帖子（所有測試帖子...）比這兩個小部件的高度長得多，當然，隨着更多帖子的添加，它們會變得更大。這會在側邊欄的最後一個小部件下面留下一定量的空白空間，我希望根據相鄰的#content div的高度進行填充。

假設，例如，我也想投入側邊欄其他一些內容的div，如#latest-pics，#latest-mixes和#latest-events但只有當相鄰的含量足夠大，爲他們創造空間，我會怎麼做呢？

我想過使用內嵌樣式與變量，如：（僞）

$i = #content(height); 

if $i > 500px { $display1 = 'inline' } 
    else { $display1 = 'none' } 

elseif $i > 1000px { $display2 = 'inline' } 
    else { $display2 = 'none' } 

elseif $i > 1500px { $display3 = 'inline' } 
    else { $display3 = 'none' } 

....... 

endif;

，並使用<div id="latest-pics" style="display:<?php $display1 ?>;">等等

不過，我很懷疑這將是任何地方甚至接近做我想要什麼，但是，你知道，思考過程等等！大聲笑！

我當然可以使用一個浮動側邊欄，隨着使用卷軸向下移動，但它能夠以某種方式做到這一點很不錯！

有什麼想法？

p.s - 藉口粗略的代碼示例，我正在打字，因爲我必須去上班！

在此先感謝！：D

來源

2013-07-31 Nunicorn

可能更容易只是把它們並使用JavaScript來顯示/隱藏他們基於高度尤其是高度可根據方向 – Anigel

改變我曾想，但我對JavaScript不太熟悉，所以指導將不勝感激！大聲笑！我想我可以按照類似於浮動邊欄的方式將顯示/隱藏附加到滾動位置？ – Nunicorn

絕對看起來像一個JavaScript有點兒東西。你想要一個垂直響應的佈局，這對於純粹的PHP來說幾乎是不可能的。 Web服務器首先加載php代碼，然後運行javascript;這意味着你不能在你的php中引用javascript變量。

看起來你的主題已經安裝了jquery，所以你也可以使用它。

在我看來，我會在側欄上有所有div，但要確保它們全部隱藏（style =「display：none」）。一旦頁面加載和內容DIV是對文檔，你可以抓住左邊的主要內容div的高度與

var h = $('#main').height();

現在棘手的問題是知道如何在每一個你的側邊欄小工具的內容將被填充。您可能想對此加以一些限制，以使事情更輕鬆，否則您將需要更多的後期處理。

一旦你知道你將如何處理你個人的小部件的高度，你希望他們表現出什麼等級的模式，你可以向他們展示的只是作爲

$('#widgetId').show();

其中「#widgetId」將會是你原來設置爲顯示的div上的id =「」屬性：無。

因此，這將最終被類似

if(h > 100) $('#widget1').show(); 
if(h > 300) $('#widget2').show(); 
...

ECT

如果是一些圖標是太高（說WIDGET2是500px的通常情況下），那麼你可以設置控件與高度JavaScript，並處理你想要的溢出。你可以使用overflow-y：scroll，但看起來非常難看，也許只是溢出：隱藏，並確保高度對於小部件來說一直是一個美好的地方。

來源

2013-08-02 00:48:53 haz0rd

我打算對建議做一些評論;然而，經過一番思考，我決定去找答案區。

我認爲這是完全可以實現的。（僞代碼）

設置帶有固定側邊欄項目和div的側邊欄區域併爲其他隱藏內容定義空的側邊欄div。（）（$（window）.scrollTop（）+ $（window）.height（））得到總的滾動高度。
GET used_space_height包括頭和側邊欄高度
通過計算（scrolled_height - used_space_height）的available_height
看看下一欄的div高度可以放入avaiable_height與否： 4.1。如果是，請加載下一個側邊欄div =>轉到步驟5. 4.2。如果不。 =>轉到步驟6.結束
使用ajax調用返回內容加載next sidebar div =>返回步驟1.
Loop End。

通過檢測到用戶停止滾動，在javascript/jQuery中執行上述步驟。

希望這會有所幫助。

來源

2013-07-31 15:40:49 web2kx

這對我來說也是頭腦問題;）這就是爲什麼我創建了一個簡單的java腳本插件，可以從側邊欄刪除最後一個小部件或小部件，直到側邊欄高度與內容高度相等爲止。

這樣，您可以根據需要添加儘可能多的小部件，並且如果內容不夠高，它們將被刪除。

它默認使用Twenty Thirteen主題，但您可以使用插件設置將其應用於任何主題。這就是所謂的sidebarAutomizer，可以在WP庫中找到 - http://wordpress.org/plugins/sidebarautomizer/

來源

2014-08-13 11:25:31 mrda

WordPress的：基於毗鄰內容的大小顯示額外的側邊欄小部件？

回答

相關問題