Question

I currently have it for images that move as you scroll down the screen (done with jQuery) but I want them to stop at a certain point.

This is the code i have at the moment.

$(document).ready(function() {
        var $bagSix = $("#six");
        var $bagEight = $("#eight");
        var $bagTen = $("#ten");
        var $bagTwelve = $("#twelve");

        $(window).scroll(function(){            
                $bagSix
                .stop()
                .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );

        });

                $(window).scroll(function(){            
                $bagEight
                .stop()
                .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );          
        });

                $(window).scroll(function(){            
                $bagTen
                .stop()
                .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );          
        });

                $(window).scroll(function(){            
                $bagTwelve
                .stop()
                .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );          
        });
    });

Answer 1

If you want to just stop at a specific point, you can do:

var new_top = Math.min($(window).scrollTop() + 30, 500);
$bagSix
.stop()
.animate({"marginTop": new_top + "px"}, "slow" );

This computes the new target location and makes sure it never passes 500 pixels from the top of the page.