1

できればjQueryで効果を作成する必要があります。この場合、要素はページとともに下にスクロールし、さまざまな「アンカー」にスナップします。

私の場合、「カートに追加」ボタンが各商品の価格の横にスナップし、ユーザーが下にスクロールすると、ある時点で現在の商品から離れてスクロールするWebショップの商品リストを作成する必要があります。ダウンして、次のものにスナップします。

私はソリューションとプラグインを探していましたが、これをカバーするものは何も見つかりませんでした。

どんな提案でも大歓迎です。私はこれが少なくとも1回前に行われている、および/またはプラグインまたはチュートリアルとして存在していると思います:)

編集：

私が意味することを説明するために、私はここにページを作りました：

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

上記では、window scorll イベントをキャプチャし、ページがスクロールするたびに各 Coords を反復処理します。いくつかの汚い数学を使用して、許容できるとわかった間隔で例の流れを作成しました。これは自由に変更してください。#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 に答える