Увеличить CSS Top элемента на прокрутке ⇐ Jquery

[Anonymous]

Я пытаюсь создать шаблон пост в 2 столбца (изображения слева, содержимое справа). По большей части кодирование прокрутки работает так, как мне нравится, за исключением того, что мой фиксированный элемент контента прыгает между верхним и нижним переходами. Внизу. < /p>
Можно ли увеличить верхнюю часть CSS «на свитке, чтобы обнажить переполнение фиксированных элементов? Я думаю, что это помогло бы прыжкам с нижнего перехода, так как нижняя часть фиксированного элемента сначала будет видна, а затем, когда пользователь прокручивает страницу, он снова обнаружит верхнюю часть фиксированного элемента. П.С. Я специально избегаю переполнения CSS, так как не хочу несколько полос прокрутки. Просто плавный переход.





















Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit [longer text in CodePen]...







< /code>
jquery < /p>
function stickyBlock( $ ) {

var position = $( window );
var element = $( '.column-wrapper' );
var current = element.scrollTop();
//var elheight = element[0].scrollHeight - element.offset().top + 30;
var parent = $( '.grid-content' );
var isoffset = parent.offset().top;
var isbottom = parent.offset().top + parent.outerHeight();
var placeholder = $( '.placeholder' );

position.scroll( function() {

var issticky = $( this ).scrollTop();

if( issticky >= isoffset ) {
element.addClass( 'is-sticky' );
element.css({ 'position': 'fixed', 'top': '0px', 'width': element.width() });
placeholder.css({ 'display': 'block', 'position': 'static', 'width': element.width(), 'height': element.height(), 'vertical-align': 'baseline', 'float': 'none' });
} else {
element.removeClass( 'is-sticky' );
element.css({ 'position': '', 'top': '', 'bottom': '', 'width': '' });
placeholder.css({ 'display': '', 'position': '', 'width': '', 'height': '', 'vertical-align': '', 'float': '' });
}

if( issticky && element.offset().top + element.height() >= isbottom ) {
element.removeClass( 'is-sticky' );
element.css({ 'position': 'absolute', 'top': 'auto', 'bottom': '0px', 'width': element.width() });
placeholder.css({ 'display': 'block', 'position': 'static', 'width': element.width(), 'height': element.height(), 'vertical-align': 'baseline', 'float': 'none' });
}

});
}


Подробнее здесь: https://stackoverflow.com/questions/795 ... -on-scroll