Я использую следующий javascript для верхней части страницы логотипа/раздела перед нижним колонтитулом здесь:
<div id="townEnd"><a href="#">InsideTown</a></div>
<script>
$(document).ready(function(){
// hide #townEnd first
$("#townEnd").hide();
// fade in #townEnd
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
$('#townEnd').fadeIn();
} else {
$('#townEnd').fadeOut();
}
});
// scroll body to 0px on click
$('#townEnd a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
Как я могу рассчитать, когда логотип должен исчезнуть в конце страницы? Я просто использовал 1000 в качестве примера. Кажется, что это работает, когда я тоже очень быстро прокручиваю.
Во-первых, вы должны просто использовать this.scrollTop
вместо $(this).scrollTop()
- это может показаться вам $(this).scrollTop()
, но это ОГРОМНАЯ вещь.
На том же пути вы можете использовать this.scrollHeight
для получения высоты прокручиваемой области. this.innerHeight
чтобы получить максимальную позицию прокрутки, а затем вычесть около 30 пикселей, чтобы дать себе некоторое дополнение.
if( this.scrollTop < this.scrollHeight - this.innerHeight - 30)
Вы также должны иметь логическое значение для отслеживания состояния элемента, возможно, isfadedin
, который вы обновляете. Затем вызывается только fadeIn
и fadeOut
если состояние изменяется. Это позволит сэкономить много времени на обработку!
Vanilla JS потрясающе: p
>
вместо<
, я думаю, что я неправильно понял.