1

Подскажите как сделать, чтобы при прокрутке равной 100% высоты экрана появлялся блок на js? Заранее спасибо

2
  • используйте скрипт, который будет показывать (например, проставлять display: block) ваш блок после того, как scrollTop будет равен высоте вашего экрана
    – lexxl
    13 апр 2016 в 14:26
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 14 апр 2016 в 8:01

2 ответа 2

3

Решение на jQuery:

   $(function() { 
      $(window).scroll(function() {
         $('.some-block')[$(this).scrollTop() >= $(this).height() ? 'show' : 'hide']();
       });
   });

Демо: http://codepen.io/anon/pen/redMgx

4
  • Спасибо, работает)
    – sholkingx
    13 апр 2016 в 14:43
  • Поставь отметку правильного ответа в таком случае )
    – Invision
    13 апр 2016 в 15:18
  • @Invision это что за запись такая? [$(this).scrollTop() >= $(window).height() ? 'show' : 'hide']() 13 апр 2016 в 19:26
  • создает массив с одним значением из названия метода который необходимо исполнить в качестве функции
    – Invision
    14 апр 2016 в 9:32
1

Еще один примерчик на основе вышеуказанного

$(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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.