У меня есть вопрос, который, по моему мнению, будет лучше всего объяснен с помощью изображения, поэтому я собираюсь его прикрепить.
Хорошо, так что в основном у меня есть родительский контейнер и элемент внутри него (он будет фактически блоком текста), который мы будем называть элементом FIXED.
Когда пользователь находится в верхней части страницы, я хочу, чтобы фиксированный элемент находился в верхней части своего родителя. Когда пользователь начинает прокручивать страницу, и родитель начинает перемещать порт представления, я хочу, чтобы фиксированный элемент следовал за прокруткой, пока он не достигнет дна своего родителя, а затем остановится там.
В настоящее время для этого нет HTML-кода или чего-то еще, потому что я нахожусь на стадии предварительного рисования этого сайта.
Я открыт для использования jQuery или javascript в целом, мои навыки JS ограничены, и я знаком с jQuery, но я не против копирования и вставки кода и возиться с ним.
Любая помощь будет принята с благодарностью. Спасибо!
Что вы хотите использовать с помощью javascript (с jQuery или без него), это изменение позиции элемента абсолютно против позиции родителя, родитель должен быть относительным. Вы изменяете позицию в зависимости от положения полосы прокрутки.
В этом руководстве есть хорошее объяснение того, как это сделать.
http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/
Для некоторых отзывчивых страниц или при изменении размера вашего браузера боковые панели становятся центральным элементом. поэтому вы можете захотеть позаботиться о тормозной точке. Я использовал 786. Кроме того, div сначала не может быть расположен сверху, поэтому вы должны установить смещение по коду.
<script>
$().ready(function() {
var $scrollingDiv = $("#scrollingDiv");
var $div_top = $scrollingDiv.offset().top;
$(window).scroll(function(){
if(window.outerWidth > 786) {
var $scroll_top = $(window).scrollTop();
if($scroll_top > $div_top) {
$pos = $scroll_top - $div_top;
$scrollingDiv
.stop()
.animate({"top": $pos + "px"}, "slow" );
} else if($('#scrollingDiv').offset().top > $div_top) {
$scrollingDiv
.stop()
.animate({"top": "0px"}, "slow" );
}
} else {
$scrollingDiv.css("top", 0); // sidebar became center object
}
});
$(window).resize(function() {
if(window.outerWidth > 786) {
var $scroll_top = $(window).scrollTop();
if($scroll_top > $div_top) {
$pos = $scroll_top - $div_top;
$scrollingDiv
.stop()
.animate({"top": $pos + "px"}, "slow" );
} else if($('#scrollingDiv').offset().top > $div_top) {
$scrollingDiv
.stop()
.animate({"top": "0px"}, "slow" );
}
} else {
$scrollingDiv.css("top", 0); // sidebar became center object
}
});
});
</script>