Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Исчезаение блока при прокрутке страницы (https://javascript.ru/forum/misc/52637-ischezaenie-bloka-pri-prokrutke-stranicy.html)

gogogo 28.12.2014 14:14

Исчезаение блока при прокрутке страницы
 
$(document).ready(function(){
	$("#block").hide();
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 400) {
				$('#block').fadeIn();
			} else {
				$('#block').fadeOut();
			}
		});
	});
});

При прокрутке 400 px страницы появляется блок. Как видоизменить код, чтобы блок исчезал при достижении футера (желательно за 200 px до конца страницы)

vuler 28.12.2014 14:43

В условие запили, что-нибудь подобное.
$(document).height()-window.innerHeight-$(window).scrollTop()>200

ruslan_mart 28.12.2014 14:46

http://learn.javascript.ru/play/vgLobc

<!DOCTYPE HTML>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <style type="text/css">
      body, html {
        height: 2000px;
      }
      #block {
        bottom: 20px;
        display: none;
        position: fixed;
        right: 20px;
      }
    </style>
  </head>
  <body>
    <div id="block">BLOCK</div>

    <script type="text/javascript">
      $(function(){
          var block = $('#block'),
              visible;
          $(window).scroll(function() {
              var a = $(this).scrollTop(),
                  b = a > 400 && a < $(document).height() - this.innerHeight - 200;
              if(b && !visible) {
                  block.fadeIn(200);
                  visible = true;
              }
              else if(!b && visible) {
                  block.fadeOut(200);
                  visible = false;
              }
          });
      });
    </script>

  </body>
</html>

gogogo 28.12.2014 15:45

Благодарю! То, что надо


Часовой пояс GMT +3, время: 14:51.