요소를 페이지와 함께 스크롤하고 도중에 앵커에 "스냅"합니까?

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

위의 경우 창 스코어 이벤트를 캡처하여 페이지가 스크롤 될 때마다 각 theCoords를 반복합니다. 방금 받아 들여지는 간격으로 예제 플로우를 만들기 위해 더러운 수학을 사용했습니다. 이걸 바꿀 수 있습니다. 우리는 #addToCart을 우리의 position:absolute 요소로 사용했고 우리가 우리의 배열에 대한 윈도우의 위치를 ​​평가할 때마다 우리는 그 배열에 가장 근접한 것에 기초하여 'top'을 움직입니다. 우리는 또한 'price'객체에 대한 참조를 장바구니의 'rel'속성으로 푸시합니다.

여기를 클릭하면 우리가 스냅하는 div의 텍스트가 표시됩니다.

바라건대 이것은 올바른 방향으로 나아갈 수 있기를 바랍니다.

Answer 2

첫 번째 눈에 보이는 요소의 상단을 가져온 다음이 구매의 사업부를 이동할 수 있습니다

$(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); 
}); 
​ 

가 바이올린 : i '를 잘 http://jsfiddle.net/johnkoer/Kzn6B/20/