Have an element scroll with the page and "snap" to anchors along the way?

Question

I need to create an effect, preferably in jQuery, where an element scrolls down with the page and snaps to different "anchors".

In my case, i have to build a product listing for a webshop where the "add to cart" button snaps next to the price for each product and when the user scrolls down, at a certain point, break loose from the current product and scroll down and snap to the next one.

I'v been googling for solutions and plugins but have not found anything covering this.

Any suggestions is highly appreciated. I guess this is done at least once before and/or exists as a plugin or tutorial :)

Edit:

To illustrate what i mean i made a page here:

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

What i need is when the user scrolls down trough products, the yellow div will at a certain point when next product is in focus, snap loose and scroll down and snap to next product.

Bad design in my opinion, but i just try to please :)

well, sorry but before trying and inventing the wheel again i thought i'd ask if anyone know of a more or less ready solution out there. couldn't find any with my own google skills though. — jonas, Aug 14 '12 at 13:45
you mean like this.. http://stackoverflow.com/questions/8047454/jquery-animate-scroll — Mike Sav, Aug 14 '12 at 13:52
not really @MikeSav, i will scribble something down to explain — jonas, Aug 14 '12 at 13:58
Jonas, can you transpose your page to jsfiddle.net? i would help you from there — André Alçada Padez, Aug 14 '12 at 14:25

score 2 · Accepted Answer · answered Aug 14 '12 at 14:26

This is the dirtiest 5 minute example ever.

I'll omit the CSS and HTML because they're really of little concern, as long as you understand that a moving element needs position:absolute; and that the 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});
});

In the above, we push some information about the elements we want to snap to into an array. We store the literal element reference within the param of '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);
    }
  });  
});

In the above, we capture the window scorll event, we iterate over each of theCoords everytime the page scrolls. I've just used some dirty math to make the example flow at intervals I found to be acceptable; you're welcome to change this. We used #addToCart as our position:absolute element, and each time we evaluate the position of the window against our array, we move the 'top' based on the closest match to the array. We also push the reference to the 'price' object into the 'rel' property of our cart.

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

Here, if you click, you'll get the text of the div that we snap to.

Hopefully this gets you going in the right direction.

John Koerner · Answer 2 · 2012-08-14T14:32:09.750

You can get the top of the first visible element and then move the buy div there:

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

Fiddle: http://jsfiddle.net/johnkoer/Kzn6B/20/

Have an element scroll with the page and "snap" to anchors along the way?

2 Answers2