Question

我希望能够根据相邻内容div的高度显示或隐藏侧边栏中的内容，但我不确定是否/如何完成。

例如，在我当前项目的博客页面（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

Answer 1

我打算对建议做一些评论;然而，经过一番思考，我决定去找答区。

我认为这是完全可以实现的。（伪代码）

设置带有div的固定侧边栏项目的侧边栏区域，并为其他隐藏内容定义空侧边栏div。（隐藏内容的空div：...）
循环开始：通过jQuery获取总scrolled_height（$（window）.scrollTop（）+ $（window）.height（））。
获得used_space_height，包括标题和侧边栏高度
通过（scrolled_height - used_space_height）
看看下一个侧边栏div高度是否适合avaiable_height： 4.1。如果是，请加载下一个侧边栏div =＆gt;转到第5步。 4.2。如果不。 =＆GT;转到第6步。结束
使用ajax调用加载下一个侧边栏div以返回content =＆gt;回到第1步。
Loop End。

通过检测用户停止滚动来执行javascript / jQuery中的上述步骤。

希望这有帮助。

Answer 2

绝对看起来像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，但看起来很丑陋，可能只是溢出：隐藏，并确保高度处于小部件的一致审慎位置。

Answer 3

这也让我心烦意乱;）这就是为什么我创建了一个简单的java脚本插件，它从侧边栏移除最后的小部件或小部件，直到侧边栏高度等于内容高度。

通过这种方式，您可以添加任意数量的小部件，如果内容不够高，它们将被删除。

默认使用Twenty Thirteen主题，但您可以使用插件设置将其用于任何主题。它被称为sidebarAutomizer，可以在wp存储库中找到 - http://wordpress.org/plugins/sidebarautomizer/

Wordpress：根据相邻内容的大小显示额外的侧边栏小部件？

3 个答案: