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!!

to clarify.. You want the image to float down the page but stop just before the tabs..? or you want it not floating and located right beofre the tabs? — webkit, Sep 02 '14 at 05:48
i want it floating down the page but stop just before the tabs — , Sep 02 '14 at 05:48
Well, it's not that simple.. You would need use js, basically calculate the offset top of your tabs.. you could use position fixed on the images, and on either a scroll event or interval calculate the relation between the images offset to tabs offset and at desired point change your images position to absolute with the desired offsets.. Ofcourse if you wanted to do the job right, you'd need to consider what happens on window resize including reducing the size of the images etc.. — webkit, Sep 02 '14 at 06:30

score 0 · Accepted Answer · edited May 23 '17 at 10:26

0

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 :)

edited May 23 '17 at 10:26

Community

1
1

answered Sep 02 '14 at 07:16

Ovais

374
2
7

jus copy paste this to my file? – Sep 02 '14 at 07:38
yes, you can copy-paste. But where will you paste? I believe you are using Wordpress+Woocommerce. – Ovais Sep 02 '14 at 07:43
You can enqueue script in function.php of your theme. http://codex.wordpress.org/Function_Reference/wp_enqueue_script – Ovais Sep 02 '14 at 07:49
hi that worked .. but the problem now is it gone over the top.. wat can be done?? – Sep 02 '14 at 08:44
top: 0 i changed it to top: 324px but bottom part is overflowing :( – Sep 02 '14 at 08:56
I've made changes in script, please do rest yourself and avoid discussions in comments. – Ovais Sep 02 '14 at 09:28

fixed position for a div inside a div

1 Answers1