Форум

gogogo · #1 (**permalink**) 28.12.2014, 15:14

$(document).ready(function(){
	$("#block").hide();
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 400) {
				$('#block').fadeIn();
			} else {
				$('#block').fadeOut();
			}
		});
	});
});

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

vuler · #2 (**permalink**) 28.12.2014, 15:43

В условие запили, что-нибудь подобное.

$(document).height()-window.innerHeight-$(window).scrollTop()>200

ruslan_mart · #3 (**permalink**) 28.12.2014, 15: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 · #4 (**permalink**) 28.12.2014, 16:45

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

Форум

Справочник

Discord чат

Курсы javascript