CODEWITHSUNDEEP
jquery
Alex Ritter
Alex Ritter

Reputation: 1041

jQuery scrolling div with user until bottom of containing div is reached

I am attempting to find a jquery solution for scrolling a div on my product pages within the boundaries of it's containing div.

The main content on my product pages is split into two columns. The left column contains the product images, while the right column contains the product options. The issue is that the right column options content is extremely longer than the left column. By the time the user has viewed all the product options, the left column content has completely left the screen, and the user can not even see the images for the options they selected.

I've created a jsfiddle so you can easily understand what I just said :) http://jsfiddle.net/gd7o6y91/

As you can see on the jsfiddle, I need the .left-column div to scroll with the user until it has reached the bottom of the .container div. Anyone have any ideas on how I can accomplish this with jquery?

Upvotes: 1

Views: 1214

Answers (1)

Sachin Kadam
Sachin Kadam

Reputation: 93

Below code might help you.

$(window).scroll(function(){
var marginTop = $(window).scrollTop();
var limit = $(".container").height() - $(".left-column").height();
    if(marginTop < limit )
        $(".left-column").css("margin-top",marginTop);
});

http://jsfiddle.net/gd7o6y91/3/

Upvotes: 3

Related Questions