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 🙂

Answer 1

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.