jquery - 每个部分的粘性顶部导航加元素

Question

我有一个新网站的设计，它在顶部有一个粘性导航。

没问题。

每个部分都有一个标题图形，实际上只是一个彩色条。当我向下滚动经过每个部分时，我希望该部分的彩色条贴在导航下方。因此，当您向下滚动时，可以说导航正在收集碎片。

如果我有 5 个部分，当我位于页面底部时，导航下方将有 5 个彩色条。

是否有一个示例或插件可以如此简单地完成？

Answer 1

在我开始解释之前，这是我抽出的一个快速的小演示，看一下，然后我将向您介绍我所做的:

http://jsfiddle.net/4JUaK/1/

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 或其他内容以在元素从流中取出时填充空间，以防止发生明显的变化。否则，您需要以某种方式将其计算到等式中。

希望对您有所帮助..如果您有任何问题，请告诉我!