Разрешить фиксированный ДИВ прокручивать снова

Question

Это немного сложно, так что, пожалуйста, обратитесь к этой странице для примера: No Nay Never post page

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

Я хочу, чтобы это перестало фиксироваться и прокручивается снова, когда изображение достигает нижней части комментария.

Я не могу понять, как это сделать - любая помощь будет широко оценена.

Answer 1

Когда вы начинаете прокрутку, вы делаете изображение fixed после определенного scrollTop, я предполагаю?

Все, что вам нужно знать, чтобы дать элементу положение absolute, когда достигнуто большее scrollTop. Абсолютное положение, о котором идет речь, должно быть получено из верхнего смещения раздела комментариев и высоты липкого изображения.

Answer 2

Вы, вероятно, может достичь этого, используя функцию прокрутки, которая проверяет место страницы каждый раз, когда пользователь прокручивает

$(window).scroll(function() { 
    //event will fire each time a user scrolls 
    //get the top page position 
    var screenTop = $(document).scrollTop(); 

    //Evaluate the position, do what you want 
}); 

Answer 3

Сайт в примере используется scrollTop. В каком-то момент скроллинге есть класс «липкие» добавлено в DIV (#left) с яваскриптом функцией:

function fixDiv() { 
    var $div = $("#left"); 
    if ($(window).scrollTop() > $div.data("top")) { 
     $div.addClass("sticky"); 
    } 
    else { 
     $div.removeClass("sticky"); 
    } 
} 

заданных позиционных данные («сверху») читаются в этом маленьком фрагменте

$("#left").data("top", $("#left").offset().top); // set original position on load 
$(window).scroll(fixDiv); 

Комментарий говорит сам за себя. Исходное положение для чтения,

Это «липкий» класс:

.sticky { 
    position: fixed !important; 
    top: 0 !important; 
}