Scrolling a container to a specific DIV with jQuery

Question

i'm using the following jQuery function:

$(document).ready(function () {  
    var top = $('.aside').offset().top - parseFloat($('.aside').css('marginTop').replace(/auto/, 0));
    $(window).scroll(function (event) {
        // what the y position of the scroll is
        var y = $(this).scrollTop();

        // whether that's below the form
        if (y >= top) {
            // if so, ad the fixed class
            $('.aside').addClass('fixed');
        } else {
            // otherwise remove it
            $('.aside').removeClass('fixed');
        }
    });
});

Now i want the fixed DIV (.aside) stop at a specific DIV.

Please look at my CSS. It is a 2-column-layout with a main .content column on the left and an .aside bar at the right side. I want the .aside bar to scroll untill the end of the .content column. At least as the .aside bar reached the footer. Hope you understand me =)

.content {
  float:left;
}

.container.sticky .row {
  position: relative;
  background: #fff;
}

.aside-wrapper { /* required to avoid jumping */
  left: 640px;
  position: absolute;
}

.aside {
  position: absolute;
  top: 0;
}

.aside.fixed {
  position: fixed;
  top: 0;
}

How can i do this?

this jsFiddle may help you: http://jsfiddle.net/4TfTF/26/ – Barlas Apaydin Feb 08 '13 at 00:11 — Barlas Apaydin, Feb 08 '13 at 00:11
Im sorry, that doesnt lead to the desired result. – lukpon Feb 08 '13 at 11:14 — lukpon, Feb 08 '13 at 11:14

Scrolling a container to a specific DIV with jQuery

0 Answers0