javascript - 有一个元素随页面滚动， "snap"沿途锚定吗？

Question

我需要创建一个效果，最好是在 jQuery 中，其中一个元素随页面向下滚动并捕捉到不同的“ anchor ”。

在我的例子中，我必须为一个网上商店建立一个产品列表，其中“添加到购物车”按钮会在每个产品的价格旁边捕捉，当用户向下滚动时，在某个点上，从当前的产品并向下滚动并捕捉到下一个产品。

我一直在谷歌上搜索解决方案和插件，但没有找到任何相关内容。

非常感谢任何建议。我想这之前至少完成过一次和/或作为插件或教程存在:)

编辑:

为了说明我的意思，我在这里制作了一个页面:

http://retype.se/temp/scrolltest.html

我需要的是，当用户向下滚动浏览产品时，黄色 div 将在下一个产品处于焦点时的某个点松开并向下滚动并捕捉到下一个产品。

我认为设计很糟糕，但我只是想取悦 :)

Answer 1

This is the dirtiest 5 minute example ever.

我将省略 CSS 和 HTML，因为它们确实无关紧要，只要您了解移动元素需要 position:absolute; 并且 第一个容器position:anything 将是我们使用的 offset() 容器。

//log each x,y coordniate into an array
var theCoords = [];
$.each($('.price'), function(i,obj){
  theCoords.push({
    'ele' : $(obj),
    'top' : $(obj).offset().top,
    'left' : $(obj).offset().left});
});

在上面，我们将一些关于我们想要捕捉到的元素的信息推送到一个数组中。 我们将文字元素引用存储在“ele”的参数中。

$(window).on('scroll', function(){
  $.each(theCoords, function(i, arr){
    if($(window).scrollTop() > arr.top - 75){
      $('#addToCart').css({
        'top': arr.top
      });
      $('#addToCart').prop('rel', arr.ele);
    }
  });  
});

在上面，我们捕获了 window scorll 事件，我们在每次页面滚动时迭代每个坐标。我刚刚使用了一些肮脏的数学来使示例以我认为可以接受的时间间隔流动；欢迎您更改此设置。我们使用 #addToCart 作为我们的 position:absolute 元素，每次我们根据我们的数组评估窗口的位置时，我们根据最接近的匹配移动“顶部”到阵列。我们还将对“价格”对象的引用推送到购物车的“rel”属性中。

$('#addToCart').click(function(){
  console.log($($(this).prop('rel')).text());
});

在这里，如果您单击，您将获得我们捕捉到的 div 的文本。

希望这能让您朝着正确的方向前进。