我有一个新网站的设计，顶部有一个粘性导航。
没问题。
每个部分都有一个标题图形，它实际上只是一个彩色条。当我向下滚动经过每个部分时，我希望该部分的彩色条贴在导航下方。所以当你向下滚动时，可以说导航正在收集碎片。
如果我有 5 个部分，当我位于页面底部时，导航下方将有 5 个彩色条。
是否有一个示例或插件可以相当简单地完成？
【问题讨论】：
标签： jquery css layout responsive-design
在我开始解释之前，这里有一个我抽出的快速小演示，看一看，然后我将引导你完成我所做的：
var bar_positions = [];
$.each($('.bar'), function () {
bar_positions.push($(this).offset().top);
});
首先，我创建了一个数组来存储条形的位置，方法是遍历它们并将它们添加进去。
var collected_bars = 0;
var debris_height = 20;
$(window).scroll(function () {
我在这里所做的只是初始化一些稍后将使用的变量，然后我创建了一个 scroll() 函数，该函数在用户每次滚动时都会触发。
var random_number = 0;
if ($(window).scrollTop() + debris_height >= bar_positions[collected_bars]) {
collected_bars++;
debris_height += 20;
random_number = Math.random() * 8 - 4;
$('.bar' + collected_bars).css({
'position': 'fixed',
'-webkit-transform': 'rotate(' + random_number + 'deg)',
'transform': 'rotate(' + random_number + 'deg)'
});
}
这就是有趣的地方。该条件检查scrollTop() 位置 - 加上导航和收集条的任何额外高度 - 是否大于最近条的位置。通过使用 collected_bars 变量查看数组中的第一个元素，可以找到最近的柱。
如果它确实超过了那个位置，我给那个变量加一个，告诉它我们现在要寻找下一个柱。然后我在debris_height 中添加一点，以帮助正确计算下一个位置的位置。我还将必要的 CSS 应用于我们刚刚“收集”的栏。我将它设置为position: fixed;，因为我已经在样式表中声明了left 和top 属性，所以它只需要去我想要的地方。我还进行了随机旋转...这可以通过动画使其看起来更酷，但我会留给你。
这块代码基本上是我们刚刚所做的版本的镜像......如果我们的位置变得小于之前收集的柱的位置，则将它们恢复原状！
现在，显然我做得很快，而且有点粗糙，但这应该足以让你把它清理到需要的状态......
我在示例中没有涉及的一件大事：
当您将条形更改为固定位置时，它不再占用页面空间，所有内容都会向上移动。在我的示例中，我没有做任何事情来适应这一点，因此定位比较有点不同步。最好的解决方案是在元素从流中取出时添加padding 或其他内容来填充空间，以防止发生明显的变化。否则，您将需要以某种方式将其计算到等式中。
希望对您有所帮助。如果您有任何问题，请告诉我！
【讨论】：