Подскажите как сделать, чтобы при прокрутке равной 100% высоты экрана появлялся блок на js? Заранее спасибо
2 ответа
Решение на jQuery
:
$(function() {
$(window).scroll(function() {
$('.some-block')[$(this).scrollTop() >= $(this).height() ? 'show' : 'hide']();
});
});
-
-
-
@Invision это что за запись такая?
[$(this).scrollTop() >= $(window).height() ? 'show' : 'hide']()
13 апр 2016 в 19:26 -
создает массив с одним значением из названия метода который необходимо исполнить в качестве функции– Invision14 апр 2016 в 9:32
Еще один примерчик на основе вышеуказанного
$(function() {
var w = $('.some-block').outerWidth();
$('.some-block').css({
right: -w
});
// INFO
$(window).resize(function() {
$('.info .window').text('Window height is ' + $(window).height() + 'px');
}).resize();
$(window).scroll(function() {
// INFO
$('.info .scroll').text('Scroll top: ' + $(window).scrollTop() + 'px');
console.log('animate');
// SHOW / HIDE BLOCK
//$('.some-block')[$(window).scrollTop() >= $(window).height() ? 'show' : 'hide']();
if ($(window).scrollTop() >= $(window).height()) {
$('.some-block').stop().animate({
right: '0px'
}, 100);
} else {
$('.some-block').stop().animate({
right: -w
}, 100);
}
});
});
.info {
position: fixed;
width: 300px;
border: 1px solid red;
right: 0px;
}
.some-block {
position: fixed;
width: 300px;
border: 1px dashed green;
right: 0;
top: 100px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="info">
<span class="window"></span>
<br>
<span class="scroll"></span>
</div>
<div class="some-block">SOME BLOCK IS VISIBLE</div>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
<h1>text</h1>
display: block
) ваш блок после того, как scrollTop будет равен высоте вашего экрана