让一个元素随页面滚动并沿途“捕捉”到锚点？答案

【问题标题】：Have an element scroll with the page and "snap" to anchors along the way?让一个元素随页面滚动并沿途“捕捉”到锚点？
【发布时间】：2012-08-14 13:39:51
【问题描述】：

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

在我的情况下，我必须为网上商店构建产品列表，其中“添加到购物车”按钮紧贴在每个产品的价格旁边，并且当用户向下滚动时，在某个点上脱离当前产品并向下滚动并捕捉到下一个产品。

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

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

编辑：

为了说明我的意思，我在这里做了一个页面：

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

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

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

【问题讨论】：

好吧，对不起，但在再次尝试和发明轮子之前，我想我会问是否有人知道那里或多或少现成的解决方案。不过用我自己的谷歌技能找不到任何东西。
你的意思是这样的..stackoverflow.com/questions/8047454/jquery-animate-scroll
不是真的@MikeSav，我会草草解释一下
用一个例子更新了原帖。
Jonas，你能把你的页面转移到 jsfiddle.net 上吗？我会从那里帮助你

标签： javascript jquery css

【解决方案1】：

This is the dirtiest 5 minute example ever.

我将省略 CSS 和 HTML，因为它们真的无关紧要，只要您了解移动元素需要 position:absolute; 和 first container with a position:anything will be the offset() container we use。

//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);
    }
  });  
});

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

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

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

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

【讨论】：

【解决方案2】：

您可以获取第一个可见元素的顶部，然后将购买 div 移到那里：

$(document).scroll(function () {
    // Get the top position of the first product which has a visible top.
    var newTop = $('.product').filter(function() {
         return $(this).offset().top >= $(window).scrollTop()
    }).first().offset().top;

    $(".buy").stop().animate({top: newTop}, 500);
});

小提琴：http://jsfiddle.net/johnkoer/Kzn6B/20/

【讨论】：