Question

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

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

我一直在谷歌搜索解决方案和插件，但没有发现任何涉及此事。

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

编辑：

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

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

我需要的是当用户向下滚动产品时，当下一个产品聚焦时，黄色div将在某个点上，松开并向下滚动并对齐到下一个产品。

我认为设计不好，但我只是想取悦：）

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

在上面，我们捕获了窗口scorll事件，每次页面滚动时我们遍历每个Coords。我刚刚使用了一些脏数学来使示例流程在我发现可接受的时间间隔内进行;欢迎你改变这个。我们使用#addToCart作为我们的position:absolute元素，每次我们根据数组计算窗口的位置时，我们根据与数组最接近的匹配来移动'top'。我们还将对'price'对象的引用推送到我们购物车的'rel'属性中。

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

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

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

Answer 2

你可以获得第一个可见元素的顶部，然后将buy 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/

有一个元素滚动页面并沿途“捕捉”到锚点？

2 个答案: