1

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

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

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

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

编辑：

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

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

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

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

4

2 回答 2

2

这是有史以来最脏的 5 分钟示例。

我将省略 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 的文本。

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

于 2012-08-14T14:26:17.033 回答
1

您可以获取第一个可见元素的顶部，然后将购买 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/

于 2012-08-14T14:26:44.620 回答