Как изменить «позицию» CSS на div, когда он достигает конца контейнера div?

Question

Я работаю над функцией для веб-сайта, которая создает панель слева от отдельной страницы публикации, которая содержит кнопки социальных сетей.Панель следует за читателем вниз по странице, когда они прокручиваются.Это похоже на тот, который можно найти на Mashable.com.

Тем не менее, панель будет продолжать прокручивать страницу вниз в область нижнего колонтитула сайта, но я бы хотел, чтобы она остановилась, когда достигнет конца контейнера div (содержимое главной страницы между заголовком инижний колонтитул).

Я предполагаю, что задействован JavaScript, который работает при изменении «position: fixed» на «position: absolute», но я не уверен, какой именно код.

У кого-нибудь есть мысли / может мне помочь?

Answer 1

Как это jsFiddle ?

Основной jQuery:

var stickerTop = parseInt($('#sticker').offset().top);
$(window).scroll(function() {
    $("#sticker").css((parseInt($(window).scrollTop()) + parseInt($("#sticker").css('margin-top')) > stickerTop) ? {
        position: 'fixed',
        top: '0px'
    } : {
        position: 'relative'
    });
});

Answer 2

Плагин jQuery делает это правильно, оставаясь внутри своего контейнера, сохраняя при этом верхнюю часть, когда это возможно: https://github.com/sebringj/jquery.dumbfixed

 $('#middle .right').dumbFixed();

Выбранный элемент выполняет некоторые незначительные изменения в своем родительском элементе, такие как установка min-width иmin-height для его собственных измерений, потому что у родителя могут не быть заданы размеры, и он будет полагаться на своего потомка, чтобы переместить его в свои собственные измерения.