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

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或其他东西来填充空间，以防止明显的变化。否则你需要以某种方式计算这个等式。

希望有帮助..如果您有任何问题，请与我联系！