fixed position for a div inside a div

Question

i was working on woocommerce site. My Site . The single product page has a control generator with a number of drop down options.So when a user selects each options he cannot see the changes happening at the top.So i position the image div as fixed.As follows.

.single-product .images{position:fixed;}

this made the image fixed but it is floating till down the page.I only need it just before the description/review tabs starts.Is there any other css or any js/jquery solutions to solve this .Please help.Thanks!!

Answer 1

Based on your website environment, you need something like this:

var images = jQuery('.images');

jQuery.fn.followTo = function (pos) {
    var $this = this,
        $window = jQuery(window);

    $window.scroll(function (e) {
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos - $this.height()
            });
        } else {
            $this.css({
                position: 'fixed',
                top: 'auto' //earlier it was 0
            });
        }
    });
};

images.followTo(jQuery('#myTab').offset().top - images.height());

You may need to re-position the elements a bit, but the script will work on your website, as I tested with firebug.

I have note written this script, the script attributed to: Stopping fixed position scrolling at a certain point?

Let me know if you can take it forward from here :)