Tell me how to make a block on js appear when scrolling at 100% of the screen height? Thank you in advance

  • use a script that will show (for example, set display: block ) your block after the scrollTop is equal to the height of your screen - lexxl
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

2 answers 2

jQuery solution:

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

Demo: http://codepen.io/anon/pen/redMgx

  • Thanks, works) - sholkingx
  • Put a mark in the correct answer in this case) - Invision
  • @Invision this is what a record like that? [$(this).scrollTop() >= $(window).height() ? 'show' : 'hide']() [$(this).scrollTop() >= $(window).height() ? 'show' : 'hide']() - Jean-Claude
  • creates an array with one value from the name of the method that must be executed as a function - Invision

Another example based on the above

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