0

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

那里没问题。

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

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

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

C

4

1 回答 1

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

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

于 2013-11-03T05:26:01.050 回答