Как сделать, что бы при прокрутке блок прижимался к краю браузера, при этом блок находится далеко в подвале? Вот скролируемый блок Вот он в подвале Когда до скролировали до этого блока в подвале, скролируемый блок садится на место где он должен и быть.
Ответ
Например так:
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.arr').fadeIn();
} else{
$('.arr').fadeOut();
}
});
$(document).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
$('.arr').addClass('fix');
} else {
$('.arr').removeClass('fix');
}
});
.footer{
position: relative;
}
/* Стрелка изначальная */
.arr {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
}
/* Стрелка при скролле до низа страницы */
.arr.fix {
position: absolute;
top: -50px;
bottom: auto;
}
/* Стили для наглядности */
.arr {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid #000;
transition: all .27s ease-in-out;
}
.content {
height: 1500px;
border: 1px solid #ccc;
}
.footer {
background: #333;
text-align: center;
padding: 1rem;
color: #fff;
}
Комментариев нет:
Отправить комментарий